import React from 'react';

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

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

export const Inline = (_: any) => (
  <FieldContainer>
    <Fieldset aria-describedby="name-hint">
      <FieldsetLegend>Έχετε αλλάξει το όνομα σας;</FieldsetLegend>
      <Hint id="name-hint">
        Συμπεριλαμβάνεται αλλαγή του επίθετου σας ή αλλαγή του τρόπου που
        γράφετε το όνομα σας.
      </Hint>
      <RadioContainer layout="horizontal">
        <RadioItem name="changed_name" value="yes">
          Ναι
        </RadioItem>
        <RadioItem name="changed_name" value="no">
          Όχι
        </RadioItem>
      </RadioContainer>
    </Fieldset>
  </FieldContainer>
);

export default Inline;