1  import React, { ReactNode } from 'react';
 2  
 3  interface ButtonProps {
 4    label?: string;
 5    icon?: ReactNode;
 6    onClick: () => void;
 7    variant?: 'primary' | 'secondary';
 8    size?: 'small' | 'medium' | 'large';
 9    fullWidth?: boolean;
10  }
11  
12  export const Button: React.FC<ButtonProps> = ({ 
13    label, 
14    icon, 
15    onClick, 
16    variant = 'primary', 
17    size = 'medium',
18    fullWidth = false
19  }) => {
20    const baseClasses = "font-bold rounded-full inline-flex items-center justify-center transition duration-300 ease-in-out";
21    const variantClasses = variant === 'primary' 
22      ? "bg-blue-500 hover:bg-blue-600 text-white"
23      : "bg-gray-200 hover:bg-gray-300 text-gray-800";
24    const sizeClasses = {
25      small: "py-4 px-2 text-sm",
26      medium: "py-4 px-4 text-base",
27      large: "py-4 px-6 text-lg"
28    };
29    const widthClass = fullWidth ? "w-full" : "";
30  
31    return (
32      <button 
33        className={`${baseClasses} ${variantClasses} ${sizeClasses[size]} ${widthClass}`}
34        onClick={onClick}
35      >
36        {icon && <span className="mr-2">{icon}</span>}
37        {label && <span>{label}</span>}
38      </button>
39    );
40  };