Glare Button

import React, { forwardRef } from 'react'

export interface GlareButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
    children?: React.ReactNode
    size?: 'sm' | 'md' | 'lg'
    variant?: 'glare' | 'outline'
}

const sizeClasses: Record<NonNullable<GlareButtonProps['size']>, string> = {
    sm: 'px-3 py-2 text-sm',
    md: 'px-6 py-3 text-sm',
    lg: 'px-7 py-4 text-base',
}

const variantClasses: Record<NonNullable<GlareButtonProps['variant']>, string> = {
    glare: 'bg-zinc-900 text-zinc-300 border border-white/10 shadow-[0_0_20px_rgba(0,0,0,0.4)]',
    outline: 'bg-transparent text-amber-600 border border-zinc-900 text-zinc-300',
}

export const GlareButton = forwardRef<HTMLButtonElement, GlareButtonProps>(
    ({ children = 'Glare Button', size = 'md', variant = 'glare', className = '', disabled, ...rest }, ref) => {
        const isGlare = variant === 'glare'
        return (
            <button
                ref={ref}
                disabled={disabled}
                className={`relative overflow-hidden inline-flex items-center justify-center ${sizeClasses[size]} ${variantClasses[variant]} disabled:opacity-50 transition-all duration-200 ease-out hover:scale-105 active:scale-95 group ${className}`}
                {...rest}
            >
                {isGlare && (
                    <div className="absolute inset-0 bg-linear-to-r from-transparent via-white/20 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-1000 ease-in-out pointer-events-none" />
                )}

                <span className="relative font-bold text-xs tracking-widest uppercase transition-colors">
                    {children}
                </span>
            </button>
        )
    }
)

GlareButton.displayName = 'GlareButton'