import * as React from "react";

import type { VariantProps } from "@karma/cva";
import { cva, cx } from "@karma/cva";

const textAreaVariants = cva({
  base: "flex min-h-[80px] w-full rounded-md bg-background px-3 py-2 text-sm text-primary placeholder:text-muted focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50",
  variants: {
    variant: {
      primary:
        "resize-none rounded-none border-0 border-b-[1px] border-b-background-invert bg-transparent text-primary focus-visible:ring-0 focus-visible:ring-offset-0 dark:border-b-white",
      secondary:
        "resize-none rounded-none border-0 border-b-[0.5px] border-b-primary bg-transparent text-secondary focus-visible:ring-0 focus-visible:ring-offset-0",
      outline:
        "rounded-md border border-neutral-200 bg-white text-black placeholder:text-neutral-500",
    },
    size: {
      small: "text-xs",
      medium: "text-sm",
      large: "text-lg",
    },
  },
  defaultVariants: {
    variant: "primary",
    size: "small",
  },
});

export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> &
  VariantProps<typeof textAreaVariants>;

export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
  ({ className, variant, size, ...props }, ref) => {
    const combinedProps = {
      className: cx(textAreaVariants({ variant, size, className })),
      ref,
      ...props,
    };
    return (
      <textarea
        {...(combinedProps as React.TextareaHTMLAttributes<HTMLTextAreaElement>)}
      />
    );
  },
);
Textarea.displayName = "Textarea";