import type { FC, ReactNode } from 'react';
import { cn } from '../../lib/utils';

export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'outline';
  size?: 'sm' | 'md' | 'lg';
  loading?: boolean;
  fullWidth?: boolean;
  children: ReactNode;
}

const variants: Record<NonNullable<ButtonProps['variant']>, string> = {
  primary:
    'bg-homenest-brown text-white hover:bg-homenest-brown-dark focus:ring-homenest-brown disabled:bg-homenest-brown/40 shadow-soft',
  secondary:
    'bg-homenest-sage text-homenest-bark hover:bg-homenest-sage-dark focus:ring-homenest-sage disabled:bg-homenest-sage/40',
  ghost:
    'bg-transparent text-homenest-bark-muted hover:bg-homenest-brown/10 hover:text-homenest-bark focus:ring-homenest-brown',
  danger:
    'bg-homenest-rose text-white hover:bg-rose-600 focus:ring-rose-500 disabled:bg-rose-300',
  outline:
    'bg-homenest-cream-light text-homenest-bark border border-homenest-sand hover:border-homenest-brown hover:text-homenest-brown focus:ring-homenest-brown',
};

const sizes: Record<NonNullable<ButtonProps['size']>, string> = {
  sm: 'px-3 py-1.5 text-xs rounded-lg',
  md: 'px-4 py-2 text-sm rounded-xl',
  lg: 'px-6 py-3 text-base rounded-xl',
};

export const Button: FC<ButtonProps> = ({
  variant = 'primary',
  size = 'md',
  loading = false,
  fullWidth = false,
  children,
  className,
  disabled,
  ...props
}) => {
  return (
    <button
      className={cn(
        'inline-flex items-center justify-center font-medium transition-all focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed rounded-xl',
        variants[variant],
        sizes[size],
        fullWidth && 'w-full',
        className
      )}
      disabled={disabled || loading}
      {...props}
    >
      {loading && <span className="mr-2 inline-block h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />}
      {children}
    </button>
  );
};

export default Button;
