import React, {FC, PropsWithChildren} from "react";
import classNames from "classnames";
import {EmulatedButton} from "../EmulatedButton";

export type ButtonProps = {
    onClick?: () => void;
    preset?: 'blue' | 'gray' | 'gray-darker' | 'gray-lighter' | 'transparent',
    size?: 'large' | 'medium' | 'small' | 'extra-small' | 'ultra-small',
    width?: 'wrap' | 'full-width'
    className?: string;
}

export const Button: FC<ButtonProps & PropsWithChildren> = ({children, onClick, preset = 'gray', size = 'small', width = 'full-width', className}) => {
    return <EmulatedButton className={classNames('min-w-[max-content] border-[0x]  border-opacity-20 rounded-full  ---rounded-2 transition-all duration-200 focus:scale-[.98] active:scale-[.98] scale-100 flex items-center justify-center', {
        'w-full': width === 'full-width',
        'px-6 py-2 text-2x font-normal h-10': size === 'large',
        'px-5 py-1 text-base font-normal h-9': size === 'medium',
        'px-4 h-9': size === 'small',
        'px-2 h-7': size === 'extra-small',
        'px-1 h-5 text-smaller-1': size === 'ultra-small',
        '!bg-gray-250 hover:bg-gray-150 hover:bg-opacity-70 bg-opacity-10 border-gray-150 text-gray-700': preset === 'gray-lighter',
        'bg-gray-400 hover:bg-gray-150 hover:bg-opacity-70 bg-opacity-20 border-gray-200 text-gray-600': preset === 'gray',
        'bg-gray-450 hover:bg-gray-150 hover:bg-opacity-70 bg-opacity-30 border-gray-300 text-gray-650': preset === 'gray-darker',
        'bg-blue-normal bg-opacity-90 border-blue-200 text-blue-10 hover:bg-blue-tint-200': preset === 'blue',
        'bg-transparent hover:bg-gray-150 hover:bg-opacity-10 bg-opacity-0 border-transparent text-gray-700': preset === 'transparent',
    }, className)}
                           onClick={onClick}>
        {children}
    </EmulatedButton>
}