1  import React from 'react'
 2  
 3  export interface ButtonProps {
 4    variant?: 'primary' | 'secondary' | 'danger'
 5    size?: 'small' | 'medium' | 'large'
 6    children: React.ReactNode
 7    onClick?: () => void
 8    disabled?: boolean
 9    type?: 'button' | 'submit' | 'reset'
10    className?: string
11  }
12  
13  export const Button: React.FC<ButtonProps> = ({
14    variant = 'primary',
15    size = 'medium',
16    children,
17    onClick,
18    disabled = false,
19    type = 'button',
20    className = '',
21  }) => {
22    const baseStyles =
23      'font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed'
24  
25    const variantStyles = {
26      primary:
27        'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500 dark:bg-blue-500 dark:hover:bg-blue-600',
28      secondary:
29        'bg-gray-200 text-gray-900 hover:bg-gray-300 focus:ring-gray-500 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600',
30      danger:
31        'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500 dark:bg-red-500 dark:hover:bg-red-600',
32    }
33  
34    const sizeStyles = {
35      small: 'px-3 py-1.5 text-sm',
36      medium: 'px-4 py-2 text-base',
37      large: 'px-6 py-3 text-lg',
38    }
39  
40    return (
41      <button
42        type={type}
43        onClick={onClick}
44        disabled={disabled}
45        className={`${baseStyles} ${variantStyles[variant]} ${sizeStyles[size]} ${className}`}
46      >
47        {children}
48      </button>
49    )
50  }