Textarea

"use client";

import { useId, useState, type TextareaHTMLAttributes } from "react";
import { cn } from "@/lib/utils";

export interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange"> {
  label: string;
  hint?: string;
  error?: string;
  /** Show a live character counter against this limit. */
  maxLength?: number;
  onChange?: (value: string) => void;
  containerClassName?: string;
}

export function Textarea({ label, hint, error, maxLength, onChange, defaultValue, value, id, className, containerClassName, rows = 5, ...props }: TextareaProps) {
  const autoId = useId();
  const fieldId = id ?? autoId;
  const [inner, setInner] = useState(String(defaultValue ?? ""));
  const text = value !== undefined ? String(value) : inner;
  const count = text.length;
  const near = maxLength !== undefined && count > maxLength * 0.9;
  const describedBy = [hint && `${fieldId}-hint`, error && `${fieldId}-error`, maxLength && `${fieldId}-count`].filter(Boolean).join(" ") || undefined;

  return (
    <div className={cn("flex flex-col gap-2", containerClassName)}>
      <div className="flex items-end justify-between gap-4">
        <label htmlFor={fieldId} className="font-da-mono text-xs font-bold tracking-da-label uppercase">
          {label}
        </label>
        {maxLength !== undefined && (
          <span id={`${fieldId}-count`} className={cn("da-stroke px-1.5 font-da-mono text-[11px] font-bold", near ? "bg-da-warning text-da-warning-fg" : "bg-da-surface text-da-surface-fg")}>
            {count}/{maxLength}
          </span>
        )}
      </div>
      <textarea
        id={fieldId}
        rows={rows}
        maxLength={maxLength}
        value={text}
        onChange={(e) => {
          setInner(e.target.value);
          onChange?.(e.target.value);
        }}
        aria-invalid={error ? true : undefined}
        aria-describedby={describedBy}
        className={cn(
          "da-stroke da-transition resize-y bg-da-input p-3 text-base text-da-fg shadow-da-sm outline-none placeholder:text-da-muted-fg",
          "focus-visible:translate-x-[3px] focus-visible:translate-y-[3px] focus-visible:shadow-none focus-visible:outline-[length:var(--da-ring-width)] focus-visible:outline-offset-[var(--da-ring-offset)] focus-visible:outline-da-ring focus-visible:outline-solid",
          error && "shadow-[3px_3px_0_0_var(--da-danger)] [--da-border:var(--da-danger)]",
          className,
        )}
        {...props}
      />
      {hint && !error && (
        <p id={`${fieldId}-hint`} className="text-sm text-da-muted-fg">
          {hint}
        </p>
      )}
      {error && (
        <p id={`${fieldId}-error`} className="text-sm font-bold">
          ! {error}
        </p>
      )}
    </div>
  );
}

export default Textarea;