import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';

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

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

type ApplicationDataSectionProps = {
  applicationDate?: string;
  sourceName?: string;
};

export const ApplicationDataSection = ({
  applicationDate,
  sourceName,
}: ApplicationDataSectionProps) => {
  const { t } = useLokaliseTranslation(['ats', 'general']);
  const { formatDate } = useFormatDate();
  const theme = useTheme();
  const sxAnswer = {
    '& .MuiTypography-globalS': {
      fontSize: theme.typography.globalXS?.fontSize,
    },
  };

  return (
    <CardContainer
      elevation={0}
      padding={16}
      fullWidth
      sx={{
        backgroundColor: theme => theme.palette.new.background.elements.grey,
        border: 0,
      }}
    >
      <Title
        title={t('ats:job_application.profile.application_data_section')}
        variant="S"
        sx={{ mb: 1 }}
      />
      <Stack sx={{ flexDirection: 'row', gap: 3, flexWrap: 'wrap' }}>
        {applicationDate && (
          <Title
            copetin={t('ats:job_candidates.new.fields.application_date.label')}
            title={formatDate(applicationDate, 'dd/MM/yyyy')}
            variant="S"
            sx={sxAnswer}
          />
        )}
        {sourceName && (
          <Title
            copetin={t('ats:job_candidates.new.fields.source.label')}
            title={sourceName}
            variant="S"
            sx={sxAnswer}
          />
        )}
      </Stack>
    </CardContainer>
  );
};