import React from 'react';

import {
  FieldContainer,
  Fieldset,
  FieldsetLegend,
} from '@digigov/ui/form/FieldContainer';
import {
  SingleCharacterInputs,
  SingleCharacterInput,
} from '@digigov/ui/form/SingleCharacterInputs';

import { Hint } from '@digigov/ui/typography/Hint';

export const Default = (_: any) => (
  <FieldContainer>
    <Fieldset aria-describedby="code-hint">
      <FieldsetLegend heading>Κωδικός Επιβεβαίωσης</FieldsetLegend>
      <Hint id="code-hint">
        Εισάγετε τον μοναδικό κωδικό που λάβατε στο ηλεκτρονικό σας ταχυδρομείο.
      </Hint>
      <SingleCharacterInputs>
        <SingleCharacterInput name="first-digit" defaultValue={4} />
        <SingleCharacterInput name="second-digit" defaultValue={4} />
        <SingleCharacterInput name="third-digit" defaultValue={5} />
        <SingleCharacterInput name="forth-digit" defaultValue={1} />
        <SingleCharacterInput name="fifth-digit" defaultValue={2} />
        <SingleCharacterInput name="sixth-digit" defaultValue={3} />
      </SingleCharacterInputs>
    </Fieldset>
  </FieldContainer>
);

export default Default;