interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'outline' | 'danger' | 'ghost'
  size?: 'sm' | 'md'
  loading?: boolean
}

const VARS: Record<string, React.CSSProperties> = {
  primary: { background: '#4f6ef7', color: '#fff', border: '1px solid transparent' },
  outline: { background: '#fff',    color: '#1e293b', border: '1px solid #e2e8f0' },
  danger:  { background: '#fff',    color: '#dc2626', border: '1px solid #fecaca' },
  ghost:   { background: 'transparent', color: '#64748b', border: '1px solid transparent' },
}

export function Btn({ variant = 'outline', size = 'md', loading, children, disabled, style, ...rest }: Props) {
  const base: React.CSSProperties = {
    display: 'inline-flex', alignItems: 'center', gap: 6,
    padding: size === 'sm' ? '5px 10px' : '8px 16px',
    fontSize: size === 'sm' ? 12 : 13, fontWeight: 500,
    borderRadius: 7, cursor: 'pointer', transition: 'all .15s',
    opacity: disabled || loading ? .55 : 1,
    ...VARS[variant], ...style,
  }
  return (
    <button disabled={disabled || loading} style={base} {...rest}>
      {loading ? <span style={{ width: 12, height: 12, border: '2px solid currentColor',
        borderTopColor: 'transparent', borderRadius: '50%', animation: 'spin .6s linear infinite',
        display: 'inline-block' }} /> : null}
      {children}
    </button>
  )
}
