import { type FC } from 'react';

import HuCardContainer from '@material-hu/components/design-system/CardContainer';
import HuFormSwitcher from '@material-hu/components/design-system/Switcher/form';
import HuTitle from '@material-hu/components/design-system/Title';

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

import { policiesFields } from '../../form';

const Restrictions: FC = () => {
  const { t } = useLokaliseTranslation('time_tracker');

  return (
    <>
      <HuTitle
        variant="L"
        title={t('policies.RESTRICTIONS')}
        description={t('policies.RESTRICTIONS_DESCRIPTION')}
        sx={{ mb: 3 }}
      />
      <HuCardContainer sx={{ width: '100%', mb: 2 }}>
        <HuFormSwitcher
          name={policiesFields.restrictions.restrictStart}
          switcherProps={{
            title: t('policies.RESTRICT_START'),
            description: t('policies.RESTRICT_START_DESCRIPTION'),
          }}
        />
      </HuCardContainer>
      <HuCardContainer sx={{ width: '100%', mb: 2 }}>
        <HuFormSwitcher
          name={policiesFields.restrictions.restrictHistory}
          switcherProps={{
            title: t('policies.RESTRICT_HISTORY'),
            description: t('policies.RESTRICT_HISTORY_DESCRIPTION'),
          }}
        />
      </HuCardContainer>
      <HuCardContainer sx={{ width: '100%' }}>
        <HuFormSwitcher
          name={policiesFields.restrictions.restrictAutomaticApproval}
          switcherProps={{
            title: t('policies.RESTRICT_AUTO_APPROVAL'),
            description: t('policies.RESTRICT_AUTO_APPROVAL_DESCRIPTION'),
          }}
        />
      </HuCardContainer>
    </>
  );
};

export default Restrictions;