import { FC } from 'react';

import { IconCalendarCheck } from '@material-hu/icons/tabler';
import Avatar from '@material-hu/mui/Avatar';
import { useTheme } from '@material-hu/mui/index';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import useCelebrationTitle from 'src/components/dashboard/upcomingCelebrations/hooks/useCelebrationTitle';

const NoFoundMessage: FC = () => {
  const { notFound: emptyListMessage } = useCelebrationTitle();
  const theme = useTheme();

  return (
    <Stack
      sx={{
        alignItems: 'center',
        gap: 2,
        mt: 12,
      }}
    >
      <Avatar
        sx={{
          backgroundColor: theme.palette.new.action.background.brand.default,
        }}
      >
        <IconCalendarCheck color={theme.palette.new.text.neutral.brand} />
      </Avatar>
      <Typography
        variant="globalM"
        fontWeight="fontWeightSemiBold"
      >
        {emptyListMessage}
      </Typography>
    </Stack>
  );
};

export default NoFoundMessage;