import React from 'react';

import { ErrorMessage } from '@digigov/ui/form/ErrorMessage';
import {
  FieldContainer,
  Fieldset,
  FieldsetLegend,
} from '@digigov/ui/form/FieldContainer';
import { RadioContainer, RadioItem } from '@digigov/ui/form/RadioContainer';

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

export const WithErrorMessage = (_: any) => (
  <FieldContainer error>
    <Fieldset aria-describedby="travel-hint travel-error">
      <FieldsetLegend size="md">
        Θα ταξιδέψετε σε κάποια από αυτές τις χώρες;
      </FieldsetLegend>
      <Hint id="travel-hint">Μπορείτε να επιλέξετε μόνο μία επιλογή.</Hint>
      <ErrorMessage id="travel-error">
        <VisuallyHidden>Λάθος:</VisuallyHidden> Πρέπει να επιλέξετε μια
        απάντηση.
      </ErrorMessage>
      <RadioContainer>
        <RadioItem name="country" value="en">
          Αγγλία
        </RadioItem>
        <RadioItem name="country" value="fr">
          Γαλλία
        </RadioItem>
      </RadioContainer>
    </Fieldset>
  </FieldContainer>
);

export default WithErrorMessage;