import {Theme, styled} from '@mui/material';
import {IDropdownOptionContainer as IContainer} from './dropdown-option.type';

const backgroundColorDetector = ({
    isFocused,
    isSelected,
    theme,
}: {
    isSelected: boolean;
    isFocused: boolean;
    theme: Theme;
}) => {
    if (isSelected) return theme.palette.gray[50];
    if (isFocused) return theme.palette.gray[50];
    return theme.palette.white;
};

const Container = styled('div')<IContainer>(
    ({theme, isSelected, isFocused}) => ({
        '> div': {
            transition: '0.3s',
            backgroundColor: backgroundColorDetector({
                isFocused,
                isSelected,
                theme,
            }),
            fontSize: '0.8rem',
            padding: '.625rem .875rem',
            cursor: 'pointer',
            color: theme.palette.typography[900],
        },
    }),
);

export const DropdownOptionStyle = {
    Container,
};