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

export const textareaVariants = cva(
  "min-h-36 w-full rounded-md border border-line bg-white px-3 py-3 text-sm text-ink outline-none transition-colors focus:border-brand disabled:cursor-not-allowed disabled:opacity-45 aria-invalid:border-coral-strong",
  {
    variants: {
      resize: {
        vertical: "resize-y",
        none: "resize-none",
      },
      typography: {
        mono: "font-mono",
        sans: "font-sans",
      },
    },
    defaultVariants: {
      resize: "vertical",
      typography: "mono",
    },
  },
);

export type TextareaProps = JSX.TextareaHTMLAttributes<HTMLTextAreaElement> &
  VariantProps<typeof textareaVariants>;

/** Standard multiline input with explicit resize and typography variants. */
export function Textarea(props: TextareaProps) {
  const [local, rest] = splitProps(props, ["resize", "typography", "class", "children"]);
  return (
    <textarea
      {...rest}
      data-slot="textarea"
      class={cn(
        textareaVariants({ resize: local.resize, typography: local.typography }),
        local.class,
      )}
    >
      {local.children}
    </textarea>
  );
}