import React from 'react'; interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> { variant?: 'primary' | 'secondary' | 'danger' | 'ghost'; isLoading?: boolean; } export const Button: React.FC<ButtonProps> = ({ variant = 'primary', isLoading, children, ...props }) => { const colors = { primary: { bg: '#FF1493', color: '#fff' }, secondary: { bg: '#FFF0F5', color: '#FF1493' }, danger: { bg: '#EF4444', color: '#fff' }, ghost: { bg: 'transparent', color: '#374151' }, }; const c = colors[variant]; return ( <button {...props} disabled={isLoading || props.disabled} style={{ padding: '10px 20px', borderRadius: 9999, border: variant === 'secondary' ? '2px solid #FF1493' : 'none', background: c.bg, color: c.color, fontWeight: 700, fontSize: 14, cursor: 'pointer', opacity: isLoading ? 0.7 : 1, ...props.style }}> {isLoading ? 'Loading...' : children} </button> ); };