import { IconInfoCircle } from '@material-hu/icons/tabler';

import StateCard from '@material-hu/components/design-system/StateCard';

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

export const FilesAndNotesEmptyState = () => {
  const { t } = useLokaliseTranslation('ats');

  return (
    <StateCard
      title={t('job_application.files_and_notes_empty_state.title')}
      description={t('job_application.files_and_notes_empty_state.description')}
      icon={IconInfoCircle}
      variant="primary"
      slotProps={{
        // TODO: Design system doesn't support title slotProp and we need to override the title font size due to design reasons
        card: {
          sx: {
            '& > .MuiCardContent-root > .MuiStack-root > .MuiStack-root > .MuiStack-root:first-child > .MuiTypography-root':
              {
                fontSize: '16px',
              },
          },
        },
      }}
    />
  );
};