---
import type { HTMLAttributes } from "astro/types";
import { tv, type VariantProps } from "tailwind-variants";

type Props = HTMLAttributes<"textarea"> & VariantProps<typeof textarea>;

export const textarea = tv({
  base: [
    "border-input dark:bg-input/30 text-foreground ring-offset-background min-h-10 w-full rounded-md border bg-transparent shadow-xs",
    "focus-visible:border-outline focus-visible:ring-outline/50 transition-[color,box-shadow] focus-visible:ring-3",
    "file:text-foreground file:border-0 file:bg-transparent file:text-sm file:font-medium",
    "disabled:cursor-not-allowed disabled:opacity-50",
    "aria-invalid:border-error aria-invalid:focus-visible:ring-error/40",
    "peer placeholder:text-muted-foreground",
  ],
  variants: {
    size: {
      sm: "min-h-9 px-2 py-1 text-sm",
      md: "min-h-10 px-3 py-2 text-base",
      lg: "min-h-12 px-4 py-3 text-lg",
    },
  },
  defaultVariants: { size: "md" },
});

const { size, class: className, ...rest } = Astro.props;
---

<textarea class={textarea({ size, class: className })} data-slot="textarea" {...rest}></textarea>
