import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "../lib/cn";

const textareaVariants = cva(
  "flex w-full rounded-md border bg-transparent px-3 py-2 text-sm transition-colors placeholder:text-ctp-subtext0 focus-visible:outline-none focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50 resize-vertical",
  {
    variants: {
      state: {
        default: "border-ctp-surface1 focus-visible:ring-ctp-blue",
        success: "border-ctp-green focus-visible:ring-ctp-green",
        error: "border-ctp-red focus-visible:ring-ctp-red",
      },
    },
    defaultVariants: {
      state: "default",
    },
  },
);

interface TextareaProps
  extends Omit<VariantProps<typeof textareaVariants>, "state"> {
  label?: string;
  placeholder?: string;
  value?: string;
  onChange?: (value: string) => void;
  disabled?: boolean;
  error?: string;
  state?: "default" | "success" | "error";
  className?: string;
  id?: string;
  required?: boolean;
  rows?: number;
}

export const Textarea = ({
  label,
  placeholder,
  value,
  onChange,
  disabled = false,
  error,
  state = "default",
  className = "",
  id,
  required = false,
  rows = 4,
}: TextareaProps) => {
  const textareaId =
    id || (label ? label.toLowerCase().replace(/\s+/g, "-") : undefined);
  const textareaState = error ? "error" : state;

  return (
    <div className="space-y-1">
      {label && (
        <label
          htmlFor={textareaId}
          className="text-sm font-medium text-ctp-text"
        >
          {label}
        </label>
      )}
      <textarea
        id={textareaId}
        placeholder={placeholder}
        value={value}
        onChange={(e) => onChange?.(e.target.value)}
        disabled={disabled}
        required={required}
        rows={rows}
        className={cn(textareaVariants({ state: textareaState }), className)}
      />
      {error && <p className="text-sm text-ctp-red">{error}</p>}
    </div>
  );
};