import type { TextareaHTMLAttributes } from "react";

type Props = TextareaHTMLAttributes<HTMLTextAreaElement> & {
  label?: string;
  hint?: string;
};

export function Textarea({ label, hint, id, className = "", required, ...rest }: Props) {
  const inputId = id || rest.name;
  return (
    <label className="hb-field" htmlFor={inputId}>
      {label ? (
        <span className="hb-field__label">
          {label}
          {required ? <span className="hb-field__required" aria-hidden="true">*</span> : null}
        </span>
      ) : null}
      <textarea id={inputId} className={`hb-textarea ${className}`.trim()} required={required} {...rest} />
      {hint ? <span className="hb-field__hint">{hint}</span> : null}
    </label>
  );
}
