import React from 'react';
import { ErrorSummary } from '@digigov/ui/feedback/ErrorSummary';
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 { Link } from '@digigov/ui/navigation/Link';
import { Heading } from '@digigov/ui/typography/Heading';
import { Hint } from '@digigov/ui/typography/Hint';
import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';

export const LinkedToCheckbox = (_: any) => (
  <div>
    <ErrorSummary>
      <Heading size="sm">Υπήρξε κάποιο πρόβλημα</Heading>
      <Link href="#england">Επιλέξτε μία ή παραπάνω χώρες.</Link>
    </ErrorSummary>
    <FieldContainer error>
      <Fieldset>
        <FieldsetLegend>
          Θα ταξιδέψετε σε κάποια από αυτές τις χώρες;
        </FieldsetLegend>
        <Hint>
          Πείτε μας σχετικά με πρόσφατες αλλαγές. Επιλέξτε ό,τι ισχύει.
        </Hint>
        <ErrorMessage>
          <VisuallyHidden>Λάθος:</VisuallyHidden> Επιλέξτε μία ή παραπάνω χώρες.
        </ErrorMessage>
        <Checkbox>
          <CheckboxItem name="england" value="Αγγλία" id="england">
            Αγγλία
          </CheckboxItem>
          <CheckboxItem name="france" value="Γαλλία" id="france">
            Γαλλία
          </CheckboxItem>
        </Checkbox>
      </Fieldset>
    </FieldContainer>
  </div>
);

export default LinkedToCheckbox;