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 { Hint } from '@digigov/ui/typography/Hint';
import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';

export const Default = (_: any) => (
  <FieldContainer error>
    <Fieldset aria-describedby="country-hint">
      <FieldsetLegend>Ποιά είναι η εθνικότητα σας;</FieldsetLegend>
      <Hint id="country-hint">
        Αν έχετε πολλαπλή υπηκοότητα, επιλέξτε ό,τι ισχύει.
      </Hint>
      <ErrorMessage id="country-error">
        <VisuallyHidden>Λάθος:</VisuallyHidden>
        Επιλέξτε αν η εθνικότητα σας είναι ελληνική, κυπριακή ή κάποιας άλλης
        χώρας.
      </ErrorMessage>
      <Checkbox aria-describedby="country-error">
        <CheckboxItem name="greek" value="greek">
          Ελληνική
          <Hint>συμπεριλαμβανομένων απόδημων πολιτών</Hint>
        </CheckboxItem>
        <CheckboxItem name="cypriot" value="cypriot">
          Κυπριακή
        </CheckboxItem>
        <CheckboxItem name="another_country" value="another_country">
          Άλλη χώρα
        </CheckboxItem>
      </Checkbox>
    </Fieldset>
  </FieldContainer>
);

export default Default;