import React from 'react';

import { Checkbox, CheckboxItem } from '@digigov/ui/form/Checkbox';

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

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

export const WithHint = (_: any) => (
  <FieldContainer>
    <Fieldset aria-describedby="nationality-hint">
      <FieldsetLegend>Ποιά είναι η υπηκοότητα σας;</FieldsetLegend>
      <Hint id="nationality-hint">
        Αν έχετε πολλαπλή υπηκοότητα, επιλέξτε ό,τι ισχύει.
      </Hint>
      <Checkbox>
        <CheckboxItem name="nationality" value="gr" aria-describedby="gr-hint">
          Ελληνική
          <Hint id="gr-hint">Συμπεριλαμβανομένων απόδημων πολιτών</Hint>
        </CheckboxItem>
        <CheckboxItem name="nationality" value="cy">
          Κυπριακή
        </CheckboxItem>
        <CheckboxItem name="nationality" value="other">
          Άλλη χώρα
        </CheckboxItem>
      </Checkbox>
    </Fieldset>
  </FieldContainer>
);

export default WithHint;