import { type ControllerProps } from 'react-hook-form';
import { useTranslation } from 'react-i18next';

import CardContainer from '@design-system/CardContainer';
import FormInputClassic from '@design-system/Inputs/Classic/form';

export type EditAttachmentFormContentProps = {
  rules: ControllerProps['rules'];
};

const EditAttachmentFormContent = ({
  rules,
}: EditAttachmentFormContentProps) => {
  const { t } = useTranslation();

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

export default EditAttachmentFormContent;