import { forwardRef } from "react";
import { cn } from "@/lib/utils";

/**
 * Textarea — même règles que Input (1px line, focus rubis-glow), avec
 * un comportement `auto-resize` optionnel pour les signatures et notes.
 */
export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;

export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
  ({ className, rows = 4, ...props }, ref) => {
    return (
      <textarea
        ref={ref}
        rows={rows}
        className={cn(
          "block w-full rounded-default border border-line bg-white px-3.5 py-3",
          // 16px MIN sur mobile pour empêcher iOS Safari de zoomer au focus.
          "font-sans text-base lg:text-[15px] text-ink placeholder:text-ink-3",
          "transition-[border-color,box-shadow] duration-150 resize-none",
          "focus:outline-none focus:border-rubis focus:ring-4 focus:ring-rubis-glow",
          "disabled:cursor-not-allowed disabled:bg-cream-2 disabled:text-ink-3",
          "aria-[invalid=true]:border-rubis-deep aria-[invalid=true]:bg-rubis-glow/30",
          className,
        )}
        {...props}
      />
    );
  },
);
Textarea.displayName = "Textarea";
