import * as React from 'react';
import { cn } from '@/lib/cn';

type Variant = 'primary' | 'secondary' | 'ghost' | 'danger';
type Size = 'sm' | 'md' | 'lg';

const variants: Record<Variant, string> = {
  primary:
    'bg-[--color-accent] text-[--color-accent-fg] hover:bg-[#5557e8] active:bg-[#4f51d8] border border-transparent',
  secondary:
    'bg-[--color-bg-elevated] text-[--color-fg] hover:bg-[--color-bg-subtle] border border-[--color-border]',
  ghost:
    'bg-transparent text-[--color-fg-muted] hover:text-[--color-fg] hover:bg-[--color-bg-subtle] border border-transparent',
  danger:
    'bg-transparent text-[--color-danger] hover:bg-[rgba(239,68,68,0.08)] border border-[--color-border]',
};

const sizes: Record<Size, string> = {
  sm: 'h-7 px-2.5 text-xs gap-1.5',
  md: 'h-8 px-3 text-[13px] gap-2',
  lg: 'h-10 px-4 text-sm gap-2',
};

export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: Variant;
  size?: Size;
}

export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(
  { className, variant = 'secondary', size = 'md', ...props },
  ref,
) {
  return (
    <button
      ref={ref}
      className={cn(
        'inline-flex items-center justify-center rounded-md font-medium tracking-tight transition-colors duration-200 ease-out disabled:opacity-50 disabled:pointer-events-none select-none',
        variants[variant],
        sizes[size],
        className,
      )}
      {...props}
    />
  );
});