import { type FC, memo } from 'react';

import Box from '@material-hu/mui/Box';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import { useLokaliseTranslation } from 'src/utils/i18n';
import { getRequestStateLegend } from 'src/utils/vacations';

export const RequestStateLegend: FC = () => {
  const { t } = useLokaliseTranslation('time_off');
  const theme = useTheme();

  const listStateRequestLegend = getRequestStateLegend(t, theme);

  return (
    <Stack
      sx={{
        flexDirection: 'row',
        alignItems: 'center',
        p: 2,
        mt: 1.5,
        backgroundColor: theme => theme.palette.new.background.elements.default,
        borderRadius: 2,
      }}
    >
      {listStateRequestLegend.map(legend => (
        <>
          <Box
            sx={{
              width: 32,
              height: 32,
              backgroundColor: legend.backgroundColor,
              borderRadius: 1,
              mr: 1,
              border: legend.border,
            }}
          />
          <Typography sx={{ mr: 1, fontWeight: 'fontWeightSemiBold' }}>
            {legend.text}
          </Typography>
        </>
      ))}
    </Stack>
  );
};

export default memo(RequestStateLegend);