import Stack from '@material-hu/mui/Stack';

import HuCardContainer from '@material-hu/components/design-system/CardContainer';
import HuFormInputClassic from '@material-hu/components/design-system/Inputs/Classic/form';
import HuTitle from '@material-hu/components/design-system/Title';

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

const DetailsStepContent = () => {
  const { t } = useLokaliseTranslation('competencies');

  return (
    <Stack sx={{ gap: 2, height: '100vh' }}>
      <HuTitle
        title={t('profile_details')}
        variant="L"
      />

      <HuCardContainer fullWidth>
        <Stack sx={{ gap: 2 }}>
          <HuFormInputClassic
            name="name"
            inputProps={{
              placeholder: t('general:name'),
              hasCounter: false,
              label: t('general:name'),
            }}
            rules={validateRequired()}
          />
          <HuFormInputClassic
            name="description"
            inputProps={{
              label: t('general:inputs.optional', {
                label: t('general:description'),
              }),
              multiline: true,
              placeholder: t('general:description'),
              hasCounter: false,
              maxLength: 1000,
            }}
          />
        </Stack>
      </HuCardContainer>
    </Stack>
  );
};

export default DetailsStepContent;