---
import type { HTMLAttributes } from "astro/types";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";

export const button = cva(
    cn(
        "inline-flex items-center justify-center rounded-md text-sm font-medium",
        "transition-colors focus-visible:outline-none",
        "ring-main focus-visible:ring-2 focus-visible:ring-ring",
        "focus-visible:ring-offset-2 disabled:opacity-50",
        "disabled:pointer-events-none ring-offset-background"
    ),
    {
        variants: {
            variant: {
                default: "bg-main text-neutral hocus:bg-main/80",
                primary: "bg-primary/50 text-main hocus:bg-primary/80",
                destructive:
                    "bg-error text-destructive-foreground hocus:bg-destructive/90",
                outline:
                    "border border-input hover:bg-accent hover:text-accent-foreground",
                secondary: "bg-main/10 text-main hocus:bg-main/20",
                ghost: "hocus:bg-accent hocus:text-accent-foreground",
                link: "underline-offset-4 hocus:underline text-primary",
            },
            size: {
                default: "h-10 text-base py-2 px-4",
                sm: "h-9 px-3 rounded-md",
                lg: "h-11 px-8 rounded-md",
            },
        },
    }
);

export interface Props
    extends HTMLAttributes<"button">,
        VariantProps<typeof button> {}

const { variant = "default", size = "default", ...props } = Astro.props;
---

<button {...props} class={button({ variant, size })}>
    <slot />
</button>
