import React from 'react';

import { EXCLUDE_ITEM, INCLUDE_ITEM } from '@/modules/@common/TagSelector/constants';

import { MenuItem, Select, Stack } from '@/mui/components';

import styles from './StateSelect.module.scss';

type Props = {
  size: 'medium' | 'small';
  value: boolean;
  disabled: boolean;
  onChange: (value: boolean) => void;
};

function StateSelect({ size, value, disabled, onChange, ...restProps }: Props) {
  return (
    <Select
      {...restProps}
      size={size}
      disabled={disabled}
      value={value ? INCLUDE_ITEM.id : EXCLUDE_ITEM.id}
      fullWidth={false}
      className={styles.StateSelect}
      onChange={(event) => onChange(!!event.target.value as boolean)}
    >
      {[INCLUDE_ITEM, EXCLUDE_ITEM].map((item) => (
        <MenuItem key={`${item.id}`} value={item.id}>
          <Stack spacing={1} direction="row" alignItems="center">
            <item.Icon fontSize={size} htmlColor={item.color} />
            <div className={styles.Label}>{item.label}</div>
          </Stack>
        </MenuItem>
      ))}
    </Select>
  );
}

export default StateSelect;
