import React from 'react';

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

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

export const WithKeyAndAction = (_: any) => {
  return (
    <>
      <SummaryList>
        <SummaryListItem>
          <SummaryListItemKey>Όνομα</SummaryListItemKey>
          <SummaryListItemAction>
            <Link href="#">
              Αλλαγή<VisuallyHidden>Ονόματος</VisuallyHidden>
            </Link>
          </SummaryListItemAction>
        </SummaryListItem>
        <SummaryListItem>
          <SummaryListItemKey>Διεύθυνση</SummaryListItemKey>
          <SummaryListItemAction>
            <Link href="#">
              Αλλαγή<VisuallyHidden>Διεύθυνσης</VisuallyHidden>
            </Link>
          </SummaryListItemAction>
        </SummaryListItem>
        <SummaryListItem>
          <SummaryListItemKey>Τηλέφωνο</SummaryListItemKey>
          <SummaryListItemAction>
            <ButtonGroup>
              <Button variant="link">
                Αλλαγή <VisuallyHidden>τηλεφώνου</VisuallyHidden>
              </Button>
              <Button variant="link">
                Διαγραφή <VisuallyHidden>τηλεφώνου</VisuallyHidden>
              </Button>
            </ButtonGroup>
          </SummaryListItemAction>
        </SummaryListItem>
      </SummaryList>
    </>
  );
};

export default WithKeyAndAction;