import React from 'react';
import { FieldContainer } from '@digigov/ui/form/FieldContainer';
import { LabelContainer, LabelTitle } from '@digigov/ui/form/LabelContainer';
import { TextArea } from '@digigov/ui/form/TextArea';
import { Hint } from '@digigov/ui/typography/Hint';

export const LimitedCharacters = (_: any) => (
  <FieldContainer aria-describedby="info-hint">
    <LabelContainer>
      <LabelTitle size="md">
        Μπορείτε να δώσετε περισσότερες πληροφορίες;
      </LabelTitle>
      <Hint id="info-hint">
        Στις πληροφορίες μην προσθέσετε προσωπικά ή οικονομικά δεδομένα, όπως το
        ΑΜΑ ή δεδομένα πιστωτικής κάρτας.
      </Hint>
      <TextArea name="textarea" aria-describedby="char-hint"></TextArea>
      <Hint id="char-hint">
        Μπορείτε να πληκτρολογήσετε άλλους 200 χαρακτήρες.
      </Hint>
    </LabelContainer>
  </FieldContainer>
);

export default LimitedCharacters;