import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";

const buttonVariants = cva(
  "inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--color-bg-primary)] disabled:pointer-events-none disabled:opacity-50",
  {
    variants: {
      variant: {
        primary:
          "bg-[var(--color-primary)] text-[var(--color-primary-foreground)] border border-[var(--color-border-subtle)] hover:bg-[var(--color-primary-hover)] shadow-[var(--shadow-card)]",
        secondary:
          "bg-[var(--color-card)] text-[var(--color-text-secondary)] border border-[var(--color-border-hover)] hover:bg-[var(--color-bg-secondary)] hover:border-[var(--color-border-strong)]",
        tertiary:
          "bg-[var(--color-bg-tertiary)] text-[var(--color-text-secondary)] hover:bg-[color-mix(in_srgb,var(--color-bg-tertiary)_60%,var(--color-text-tertiary)_15%)]",
        ghost:
          "text-[var(--color-text-secondary)] hover:bg-[var(--color-bg-tertiary)]",
      },
      size: {
        default: "h-9 px-4 text-sm rounded-lg",
        sm: "h-8 px-3 text-xs rounded-md",
        lg: "h-11 px-5 text-sm rounded-lg",
        icon: "h-9 w-9 rounded-lg",
      },
    },
    defaultVariants: {
      variant: "primary",
      size: "default",
    },
  },
);

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {}

export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, ...props }, ref) => (
    <button
      ref={ref}
      className={cn(buttonVariants({ variant, size }), className)}
      {...props}
    />
  ),
);
Button.displayName = "Button";

export { buttonVariants };
