import { IconTrash } from '@material-hu/icons/tabler';
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 MenuList from '@material-hu/components/composed-components/MenuList';

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

type Props = {
  onRemove: () => void;
};

const REST_LINE_MIN_HEIGHT = 56;

const RestDayLine = ({ onRemove }: Props) => {
  const { t } = useLokaliseTranslation(['shifts', 'work_schedules']);
  const theme = useTheme();

  const menuOptions = [
    {
      Icon: IconTrash,
      title: t('general:delete'),
      onClick: onRemove,
    },
  ];

  return (
    <Stack
      sx={{
        flexDirection: 'row',
        alignItems: 'center',
        gap: 1,
        backgroundColor: theme.palette.new.background.elements.grey,
        border: '1px solid',
        borderColor: theme.palette.new.border.neutral.default,
        borderRadius: theme.shape.borderRadiusM,
        px: 1.5,
        py: 1,
        minHeight: REST_LINE_MIN_HEIGHT,
      }}
    >
      {/* Spacer matching the menu column so the title stays centered */}
      <Box sx={{ flex: 1 }} />
      <Typography
        variant="globalS"
        sx={{
          fontWeight: 'fontWeightSemiBold',
          color: theme.palette.new.text.neutral.default,
        }}
      >
        {t('work_schedules:free_day')}
      </Typography>
      <Stack sx={{ flex: 1, alignItems: 'flex-end' }}>
        <MenuList
          size="small"
          position="left"
          options={menuOptions}
        />
      </Stack>
    </Stack>
  );
};

export default RestDayLine;
