import { forwardRef } from 'react';
import type { ButtonHTMLAttributes } from 'react';
import { cn } from '@/lib/utils';

/*
 * Button — baseado no Design System (Figma).
 *   primary   → "Light / Medium / Primary": bg primary, texto branco, radius 12px
 *   outline   → "Ver mais" desktop: borda primary, texto primary
 *   secondary → botão contido do menu mobile: bg primary-200, texto primary
 *   ghost     → link/ação sem preenchimento
 * Regra: só tokens semânticos, nunca hex inline.
 */

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

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
    variant?: ButtonVariant;
    size?: ButtonSize;
}

const variants: Record<ButtonVariant, string> = {
    primary: 'bg-primary text-white hover:bg-primary-700',
    outline: 'border border-primary-600 text-primary hover:border-primary-400 hover:bg-primary-100 hover:text-primary-700',
    secondary: 'bg-primary-200 text-primary hover:bg-primary-300',
    ghost: 'bg-transparent text-primary hover:bg-primary-100',
};

const sizes: Record<ButtonSize, string> = {
    sm: 'h-10 px-3 text-body-sm', // 40px — tabs / links pequenos
    md: 'h-12 px-5 text-body', // 48px — padrão (Ver mais, CTAs)
    lg: 'h-14 px-6 text-body', // 56px — destaque
};

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
    ({ className, variant = 'primary', size = 'md', ...props }, ref) => (
        <button
            ref={ref}
            className={cn(
                'inline-flex items-center justify-center gap-2 rounded-md font-bold leading-none transition',
                'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2',
                'disabled:pointer-events-none disabled:opacity-50',
                variants[variant],
                sizes[size],
                className,
            )}
            {...props}
        />
    ),
);
Button.displayName = 'Button';