import React from 'react';

interface ButtonProps {
    children: React.ReactNode;
    type?: 'button' | 'submit' | 'reset';
    variant?: 'primary' | 'secondary';
    size?: 'sm' | 'md' | 'lg';
    icon?: React.ReactNode;
    iconPosition?: 'left' | 'right';
    onClick?: () => void;
    className?: string;
    fullWidth?: boolean;
    disabled?: boolean;
}
const sizes = {
    sm: 'px-3 py-1 text-sm',
    md: 'px-4 py-2 text-base',
    lg: 'px-5 py-3 text-lg',
};

const Button: React.FC<ButtonProps> = ({
    children,
    type = 'button',
    variant = 'primary',
     size = 'md',
    icon,
    iconPosition = 'left',
    onClick,
    className = '',
    fullWidth = false,
    disabled = false,
}) => {
    const baseStyle =
        'flex items-center justify-center gap-2 px-4 py-2 rounded-lg font-semibold transition-all duration-150 active:scale-95';

    const variants = {
        primary:
            'bg-gradient-to-r from-rose-400 to-rose-500 text-white shadow-md hover:opacity-90',
        secondary:
            'bg-gray-200 text-gray-700 hover:bg-gray-300',
    };

    return (
        <button
            type={type}
            onClick={onClick}
            disabled={disabled}
            className={`
                ${baseStyle}
                ${variants[variant]}
                 ${sizes[size]}
                ${fullWidth ? 'w-full' : ''}
                ${disabled ? 'opacity-50 cursor-not-allowed' : ''}
                ${className}
            `}
        >
            {icon && iconPosition === 'left' && <span>{icon}</span>}

            {children}

            {icon && iconPosition === 'right' && <span>{icon}</span>}
        </button>
    );
};

export default Button;