'use client';

import { forwardRef, type ButtonHTMLAttributes } from 'react';
import { Loader2 } from 'lucide-react';
import { Slot } from '@radix-ui/react-slot';
import { cn } from '@/lib/utils';

type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger' | 'outline';
type ButtonSize = 'sm' | 'md' | 'lg' | 'icon';

const variantClasses: Record<ButtonVariant, string> = {
  primary: 'btn-primary',
  secondary: 'btn-secondary',
  ghost: 'btn-ghost',
  danger: 'btn-danger',
  outline: 'btn border border-primary-500 text-primary-600 hover:bg-primary-50 dark:hover:bg-primary-500/10',
};

const sizeClasses: Record<ButtonSize, string> = {
  sm: 'btn-sm',
  md: '',
  lg: 'btn-lg',
  icon: 'h-10 w-10 p-0',
};

export const buttonVariants = {
  variantClasses,
  sizeClasses,
};

export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: ButtonVariant;
  size?: ButtonSize;
  loading?: boolean;
  isLoading?: boolean;
  asChild?: boolean;
}

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  (
    { className, variant = 'primary', size = 'md', loading, isLoading, disabled, children, asChild, ...props },
    ref,
  ) => {
    const isBusy = loading || isLoading;
    const Comp = asChild ? Slot : 'button';
    return (
      <Comp
        ref={ref}
        className={cn('btn', variantClasses[variant], sizeClasses[size], className)}
        disabled={disabled || isBusy}
        {...props}
      >
        {isBusy && <Loader2 className="h-4 w-4 animate-spin" aria-hidden />}
        {children}
      </Comp>
    );
  },
);

Button.displayName = 'Button';