import React from 'react'; import { componentStyles, mergeClasses } from '@/lib/styles/designSystem'; interface ButtonProps extends React.ButtonHTMLAttributes { variant?: 'primary' | 'discord' | 'auth' | 'secondary'; size?: 'sm' | 'md' | 'lg'; fullWidth?: boolean; leftIcon?: React.ReactNode; rightIcon?: React.ReactNode; loading?: boolean; children: React.ReactNode; } const sizeClasses = { sm: 'px-3 py-1.5 text-sm', md: 'px-4 lg:px-6 py-2.5 lg:py-3 text-sm lg:text-base', lg: 'px-6 py-3 text-base lg:text-lg', }; const variantClasses = { primary: 'bg-gradient-to-r from-banquise-blue to-banquise-blue-light hover:shadow-banquise-blue/25', discord: 'bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-500 hover:to-purple-500 hover:shadow-indigo-500/25', auth: 'bg-gradient-to-r from-banquise-blue-light to-banquise-blue hover:shadow-banquise-blue-light/25', secondary: 'bg-white/10 hover:bg-white/20 border border-white/20', }; export const Button: React.FC = ({ variant = 'primary', size = 'md', fullWidth = false, leftIcon, rightIcon, loading = false, children, className = '', disabled, ...props }) => { const baseClasses = mergeClasses( componentStyles.button.base, sizeClasses[size], variantClasses[variant], fullWidth ? 'w-full' : '', (disabled || loading) ? 'opacity-50 cursor-not-allowed' : '', className ); return ( ); };