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 WithHints = (_: any) => (
  <FieldContainer>
    <Fieldset aria-describedby="login-hint">
      <FieldsetLegend size="md">Πώς θέλετε να συνδεθείτε;</FieldsetLegend>
      <Hint id="login-hint">
        Θα χρειαστείτε έναν λογαριασμό με τον οποίο θα αποδείξετε την ταυτότητά
        σας ώστε να προχωρήσετε.
      </Hint>
      <RadioContainer>
        <RadioItem name="login" value="gsis" aria-describedby="gsis-hint">
          Σύνδεση με Taxisnet
          <Hint id="gsis-hint">
            Θα πρέπει να έχετε τους κωδικούς Taxisnet για να συνθείτε
          </Hint>
        </RadioItem>
        <RadioItem
          name="login"
          value="ebanking"
          aria-describedby="ebanking-hint"
        >
          Σύνδεση με λογαρισμό e-banking
          <Hint id="ebanking-hint">
            Θα πρέπει να έχετε τους κωδικούς του e-banking της τράπεζας για να
            συνδεθείτε.
          </Hint>
        </RadioItem>
      </RadioContainer>
    </Fieldset>
  </FieldContainer>
);

export default WithHints;