import * as React from "react";

import { cn } from "./utils";

function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
  return (
    <textarea
      data-slot="textarea"
      className={cn(
        // 기본 스타일
        "placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground",
        "flex field-sizing-content min-h-16 w-full rounded-md px-3 py-2 text-base md:text-sm",
        "bg-white dark:bg-gray-900",
        "text-gray-900 dark:text-white",
        "resize-none",
        "transition-[border-color,box-shadow,background-color] duration-200 outline-none",

        // 테두리 - 기본 상태 (명확한 구분)
        "border-2 border-gray-300 dark:border-gray-700",

        // hover 상태
        "hover:border-gray-400 dark:hover:border-gray-600",

        // focus 상태 - 강조
        "focus-visible:border-primary dark:focus-visible:border-primary",
        "focus-visible:ring-4 focus-visible:ring-primary/10 dark:focus-visible:ring-primary/20",

        // disabled 상태
        "disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-gray-50 dark:disabled:bg-gray-900",

        // invalid 상태
        "aria-invalid:border-destructive aria-invalid:ring-4 aria-invalid:ring-destructive/10 dark:aria-invalid:ring-destructive/20",

        className,
      )}
      {...props}
    />
  );
}

export { Textarea };
