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

/*
 * CloseButton — botão de fechar do DS (243:5420): círculo cinza claro com "X"
 * cinza. Usado em modais e overlays (Opção de crédito, busca, etc.).
 */
export function CloseButton({ className, ...props }: ButtonHTMLAttributes<HTMLButtonElement>) {
    return (
        <button
            type="button"
            aria-label="Fechar"
            className={cn(
                'flex size-8 shrink-0 items-center justify-center rounded-full bg-gray-100 text-gray-500 transition hover:bg-gray-200',
                className,
            )}
            {...props}
        >
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden>
                <path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
            </svg>
        </button>
    );
}