Textarea

"use client";

import * as React from "react";
import { cn } from "@/lib/utils";

export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
  /** Grow with content up to this many rows. */
  maxRows?: number;
  invalid?: boolean;
  /** Show a character counter against maxLength. */
  showCount?: boolean;
}

/** A textarea that grows with its content. */
export function Textarea({ maxRows = 10, invalid, showCount, className, onChange, rows = 3, ...props }: TextareaProps) {
  const ref = React.useRef<HTMLTextAreaElement>(null);
  const [count, setCount] = React.useState(String(props.value ?? props.defaultValue ?? "").length);

  const resize = React.useCallback(() => {
    const el = ref.current;
    if (!el) return;
    el.style.height = "auto";
    const line = parseFloat(getComputedStyle(el).lineHeight) || 20;
    const pad = el.offsetHeight - el.clientHeight + parseFloat(getComputedStyle(el).paddingTop) * 2;
    el.style.height = `${Math.min(el.scrollHeight, line * maxRows + pad)}px`;
  }, [maxRows]);

  React.useLayoutEffect(resize, [resize, props.value]);

  return (
    <div className="relative">
      <textarea
        ref={ref}
        rows={rows}
        aria-invalid={invalid || undefined}
        onChange={(e) => {
          setCount(e.target.value.length);
          resize();
          onChange?.(e);
        }}
        className={cn(
          "block w-full resize-none rounded-md border border-input bg-transparent px-3 py-2.5 text-sm leading-relaxed outline-none transition-[border-color,box-shadow]",
          "placeholder:text-muted-foreground/70 focus:border-foreground/40 focus:ring-2 focus:ring-ring/40",
          invalid && "border-destructive",
          showCount && "pb-7",
          className,
        )}
        {...props}
      />
      {showCount && props.maxLength && (
        <span className={cn("pointer-events-none absolute bottom-2 right-3 text-[11px] tabular-nums", count > props.maxLength * 0.9 ? "text-destructive" : "text-muted-foreground")}>
          {count}/{props.maxLength}
        </span>
      )}
    </div>
  );
}