import React from 'react';
import { ErrorMessage } from '@digigov/ui/form/ErrorMessage';
import {
  FieldContainer,
  Fieldset,
  FieldsetLegend,
} from '@digigov/ui/form/FieldContainer';
import {
  SingleCharacterInputs,
  SingleCharacterInput,
} from '@digigov/ui/form/SingleCharacterInputs';
import { Hint } from '@digigov/ui/typography/Hint';
import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';

export const WithDefaultError = (_: any) => (
  <FieldContainer error>
    <Fieldset aria-describedby="code-hint">
      <FieldsetLegend heading>Κωδικός Επιβεβαίωσης</FieldsetLegend>
      <Hint id="code-hint">
        Εισάγετε τον μοναδικό κωδικό που λάβατε στο ηλεκτρονικό σας ταχυδρομείο.
      </Hint>
      <ErrorMessage>
        <VisuallyHidden>Λάθος:</VisuallyHidden>
        Το πεδίο είναι υποχρεωτικό.
      </ErrorMessage>
      <SingleCharacterInputs>
        <SingleCharacterInput name="first-digit" error />
        <SingleCharacterInput name="second-digit" error />
        <SingleCharacterInput name="third-digit" error />
        <SingleCharacterInput name="forth-digit" error />
        <SingleCharacterInput name="fifth-digit" error />
        <SingleCharacterInput name="sixth-digit" error />
      </SingleCharacterInputs>
    </Fieldset>
  </FieldContainer>
);

export default WithDefaultError;
