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

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

const EditAttachmentFormContent = () => {
  const { t } = useLokaliseTranslation('general');
  const nameRules = useRules({ requiredWithMessage: t('required_field') });

  return (
    <HuCardContainer
      color="grey"
      sx={{
        width: '100%',
      }}
    >
      <HuFormInputClassic
        name="name"
        rules={nameRules}
        inputProps={{
          label: t('attachment.rename.label'),
          placeholder: t('name'),
          autoFocus: true,
        }}
      />
    </HuCardContainer>
  );
};

export default EditAttachmentFormContent;
