import { IconCalendarSearch } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';

import HuAvatar from '@material-hu/components/design-system/Avatar';
import { AvatarProps as HuAvatarProps } from '@material-hu/components/design-system/Avatar/types';
import HuCardContainer from '@material-hu/components/design-system/CardContainer';
import HuTitle from '@material-hu/components/design-system/Title';
import { TitleProps as HuTitleProps } from '@material-hu/components/design-system/Title/types';

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

type EmptyStateProps = {
  titleProps?: Partial<HuTitleProps>;
  Icon?: HuAvatarProps['Icon'];
};

export const EmptyState = ({ titleProps, Icon }: EmptyStateProps) => {
  const { t } = useLokaliseTranslation('time_off');
  return (
    <HuCardContainer sx={{ width: '100%' }}>
      <Stack
        sx={{
          alignItems: 'center',
          gap: 1,
        }}
      >
        <HuAvatar
          size="large"
          Icon={Icon || IconCalendarSearch}
        />
        <HuTitle
          sx={{
            '& .MuiTypography-root': { textAlign: 'center' },
            '& .MuiStack-root': {
              justifyContent: 'center',
            },
          }}
          title={titleProps?.title || t('NO_RESULTS')}
          description={titleProps?.description || t('NO_RESULTS_DESCRIPTION')}
          variant="M"
        />
      </Stack>
    </HuCardContainer>
  );
};