import * as React from "react";

import { cva, type VariantProps } from "class-variance-authority";

import { cn } from "../../lib/utils";

const textAreaVariants = cva(
  "flex w-full px-4 pt-3 pb-1 text-sm text-grayscale-textIcon-body hover:border-grayscale-border-hover outline-none disabled:pointer-events-none disabled:opacity-50 transition-colors placeholder:text-grayscale-textIcon-body",
  {
    variants: {
      variant: {
        default: "border border-transparent rounded-2xl bg-grayscale-surface",
        underline: "border-b border-grayscale-border bg-transparent",
        outline: "border rounded-2xl border-grayscale-border bg-transparent",
        square: "border border-grayscale-border bg-transparent",
      },
      status: {
        default: "",
        success: "border-success-border hover:border-success-border",
        error: "border-error-border hover:border-error-border",
      },
      size: {
        sm: "min-h-[5.5rem]",
        md: "min-h-[6.5rem]",
        lg: "min-h-[7.5rem]",
      },
    },
    defaultVariants: {
      variant: "default",
      status: "default",
      size: "md",
    },
  }
);

export interface TextareaProps
  extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "variant">,
    VariantProps<typeof textAreaVariants> {}

const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
  ({ variant, status, className, ...props }, ref) => {
    return (
      <textarea
        className={cn(textAreaVariants({ variant, status }), className)}
        ref={ref}
        {...props}
      />
    );
  }
);
Textarea.displayName = "Textarea";

export { Textarea };
Components
