import {ButtonSizeStyle as sizes} from './button-size.style';
import {styled} from '@mui/material';
import {IButton} from '../button.type';
import {ButtonVariantStyle as variants} from './button-variant.style';

const Button = styled('button')<IButton>`
    border: none;
    cursor: pointer;
    outline: none;
    transition: 0.3s;
    font-family: inherit;
    text-align: center;
    ${({size}) => sizes[size || 'md']};
    ${({variant, theme, color, disabled}) =>
        variants[variant || 'contained'](
            theme,
            color || 'primary',
            disabled || false,
        )};
    ${({aspectRatio}) => aspectRatio && `aspect-ratio:${aspectRatio}`};
    ${({fontSize}) => fontSize && `font-size:${fontSize} !important`};
`;

export const ButtonStyle = {Button};