import React from 'react';

type ButtonProps = {
    children: React.ReactNode;
    onClick?: () => void;
    type?: 'button' | 'submit' | 'reset';
    disabled?: boolean;
    variant?: 'solid' | 'outlined';
    color?: 'pink' | 'white';
    size?: 'sm' | 'md' | 'lg';
};

const Button: React.FC<ButtonProps> = ({ children, onClick, type = 'button', disabled = false, variant = 'solid', size = 'md', color = 'pink' }) => {
    const baseClasses = 'mx-auto rounded-lg font-semibold shadow-md transition duration-300 flex ';
    const disabledClasses = 'bg-gray-400 text-white cursor-not-allowed';

    const variantClasses: Record<
        NonNullable<ButtonProps['variant']>,
        Record<NonNullable<ButtonProps['color']>, string>
    > = {
        solid: {
            pink: 'bg-pink-500 hover:bg-pink-600 text-white',
            white: 'bg-white text-black hover:bg-gray-100',
        },
        outlined: {
            pink: 'border border-pink-500 text-pink-500 hover:text-white hover:bg-pink-600',
            white: 'border border-white text-white hover:text-black hover:bg-gray-100',
        },
    };

    const sizeClassesArray = { sm: 'px-2 py-1 text-sm', md: 'px-4 py-2 text-base', lg: 'px-4 py-2 text-lg' };

    const appliedVariantClasses = variantClasses[variant][color];
    const sizeClasses = sizeClassesArray[size];

    return (
        <button
            type={type}
            onClick={onClick}
            disabled={disabled}
            className={`cursor-pointer ${baseClasses} ${sizeClasses} ${disabled ? disabledClasses : appliedVariantClasses
                }`}
        >
            {children}
        </button>
    );
};

export default Button;