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

export default InlineWithDivider;