import { appearFromBottom } from '@material-hu/utils/animations';
import CardContainer from '@material-hu/components/design-system/CardContainer';
import StateCard from '@material-hu/components/design-system/StateCard';

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

const DaySummaryEmpty = () => {
  const { t } = useLokaliseTranslation('clock');

  return (
    <CardContainer
      fullWidth
      sx={{ borderRadius: theme => theme.shape.borderRadiusL }}
    >
      <StateCard
        title={t('history.empty_state_title')}
        description={t('history.empty_state_description')}
        slotProps={{
          card: {
            sx: {
              border: 'none',
              animation: `${appearFromBottom} 125ms ease-in-out backwards`,
            },
          },
        }}
      />
    </CardContainer>
  );
};

export default DaySummaryEmpty;
