import React from 'react';
import { Checkbox, CheckboxItem } from '@digigov/ui/form/Checkbox';
import { ErrorMessage } from '@digigov/ui/form/ErrorMessage';
import {
  FieldContainer,
  Fieldset,
  FieldsetLegend,
} from '@digigov/ui/form/FieldContainer';
import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';

export const NoneAnswerWithError = (_: any) => (
  <FieldContainer error>
    <Fieldset>
      <FieldsetLegend>
        Θα ταξιδέψετε σε κάποια από αυτές τις χώρες;
      </FieldsetLegend>
      <ErrorMessage id="travel-error">
        <VisuallyHidden>Λάθος:</VisuallyHidden>
        Επιλέξτε τις χώρες στις οποίες θα ταξιδέψετε, ή επιλέξτε «Όχι, δεν θα
        ταξιδέψω σε καμία από αυτές τις χώρες».
      </ErrorMessage>
      <Checkbox>
        <CheckboxItem name="country" value="en">
          Αγγλία
        </CheckboxItem>
        <CheckboxItem name="country" value="fr">
          Γαλλία
        </CheckboxItem>
        <CheckboxItem dividerText="ή" name="country" value="none">
          Όχι, δεν θα ταξιδέψω σε καμία από αυτές τις χώρες
        </CheckboxItem>
      </Checkbox>
    </Fieldset>
  </FieldContainer>
);

export default NoneAnswerWithError;