import { useId, type TextareaHTMLAttributes } from "react";
import { cn } from "../../lib/cn";
import { fieldNote, PrefixFieldShell, type FieldMeta } from "./shared";

export type TextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement> & FieldMeta;

export function TextArea({
  className,
  error,
  hint,
  id,
  label,
  prefixIcon,
  suffixIcon,
  ...props
}: TextAreaProps) {
  const generatedId = useId();
  const fieldId = id ?? generatedId;
  const hintId = hint ? `${fieldId}-hint` : undefined;
  const errorId = error ? `${fieldId}-error` : undefined;

  return (
    <label className="flex w-full flex-col gap-2" htmlFor={fieldId}>
      {label ? <span className="text-sm font-medium text-[var(--uhuru-text-primary)]">{label}</span> : null}
      <PrefixFieldShell prefixIcon={prefixIcon} suffixIcon={suffixIcon}>
        <textarea
          className={cn(
            "min-h-28 rounded-[min(var(--uhuru-radius-lg),1.125rem)] border border-[var(--uhuru-border-default)] bg-[var(--uhuru-surface-default)] px-[var(--uhuru-control-padding-x)] py-3 text-sm text-[var(--uhuru-text-primary)] outline-none transition placeholder:text-[var(--uhuru-text-tertiary)] focus:border-[var(--uhuru-border-accent)] focus:ring-1 focus:ring-[var(--uhuru-border-accent)]",
            prefixIcon ? "pl-12" : "",
            suffixIcon ? "pr-12" : "",
            error ? "border-[var(--uhuru-error-border)] focus:ring-[var(--uhuru-error-border)]" : "",
            className,
          )}
          id={fieldId}
          {...props}
        />
      </PrefixFieldShell>
      {fieldNote(error, hint, hintId, errorId)}
    </label>
  );
}