import React from 'react';

import {
  SummaryList,
  SummaryListItem,
  SummaryListItemAction,
  SummaryListItemKey,
  SummaryListItemValue,
} from '@digigov/ui/content/SummaryList';

import Button, { ButtonGroup } from '@digigov/ui/form/Button';
import { Link } from '@digigov/ui/navigation/Link';
import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';

export const WithActions = (_: any) => (
  <SummaryList>
    <SummaryListItem>
      <SummaryListItemKey>Όνομα</SummaryListItemKey>
      <SummaryListItemValue>Γιώργος Παπαδόπουλος</SummaryListItemValue>
      <SummaryListItemAction>
        <Link href="#">
          Αλλαγή<VisuallyHidden>διεύθυνσης</VisuallyHidden>
        </Link>
      </SummaryListItemAction>
    </SummaryListItem>
    <SummaryListItem>
      <SummaryListItemKey>Ημερομηνία Γέννησης</SummaryListItemKey>
      <SummaryListItemValue>11 Μαϊου 1990</SummaryListItemValue>
      <SummaryListItemAction>
        <Link href="#">
          Αλλαγή<VisuallyHidden>ημερομηνίας</VisuallyHidden>
        </Link>
      </SummaryListItemAction>
    </SummaryListItem>
    <SummaryListItem>
      <SummaryListItemKey>Τηλέφωνο επικοινωνίας</SummaryListItemKey>
      <SummaryListItemValue>6941234567</SummaryListItemValue>
      <SummaryListItemAction>
        <ButtonGroup>
          <Button variant="link">
            Αλλαγή <VisuallyHidden>τηλεφώνου</VisuallyHidden>
          </Button>
          <Button variant="link">
            Διαγραφή <VisuallyHidden>τηλεφώνου</VisuallyHidden>
          </Button>
        </ButtonGroup>
      </SummaryListItemAction>
    </SummaryListItem>
  </SummaryList>
);

export default WithActions;