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 Dense = (_: any) => (
  <FieldContainer>
    <Fieldset aria-describedby="feeling-hint">
      <FieldsetLegend>Πώς αισθάνεται αυτή τη στιγμή;</FieldsetLegend>
      <Hint id="feeling-hint">
        Πείτε μας σχετικά με πρόσφατες αλλαγές. Επιλέξτε ό,τι ισχύει.
      </Hint>
      <Checkbox dense>
        <CheckboxItem name="feeling" value="cold">
          Έχω συνάχι
        </CheckboxItem>
        <CheckboxItem name="feeling" value="fever">
          Έχω πυρετό
        </CheckboxItem>
        <CheckboxItem name="feeling" value="fatigue">
          Αισθάνομαι κούραση
        </CheckboxItem>
      </Checkbox>
    </Fieldset>
  </FieldContainer>
);

export default Dense;