import { cva, type VariantProps } from "class-variance-authority";
import { clsx } from "clsx";
import { ComponentPropsWithoutRef, forwardRef } from "react";

const buttonVariants = cva(
  "inline-flex items-center justify-center gap-2 font-semibold transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-var(--color-primary)",
  {
    variants: {
      variant: {
        primary: "bg-[var(--color-primary)] text-[var(--color-on-primary)] hover:opacity-90",
        secondary: "bg-[var(--color-panel)] text-[var(--color-foreground)] hover:bg-[color:var(--color-panel)/0.9] border border-[var(--color-border)]",
        ghost: "bg-transparent text-[var(--color-foreground)] hover:bg-[color:var(--color-border)/0.12]"
      },
      size: {
        sm: "h-9 rounded-[var(--radius-sm)] px-3 text-sm",
        md: "h-11 rounded-[var(--radius-md)] px-4 text-base",
        lg: "h-12 rounded-[var(--radius-lg)] px-6 text-base"
      }
    },
    defaultVariants: {
      variant: "primary",
      size: "md"
    }
  }
);

export interface ButtonProps extends ComponentPropsWithoutRef<"button">, VariantProps<typeof buttonVariants> {}

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button({ className, variant, size, ...props }, ref) {
  return <button ref={ref} className={clsx(buttonVariants({ variant, size }), className)} {...props} />;
});