import React from 'react';

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

export const WithoutBorders = (_: any) => (
  <SummaryList border={false}>
    <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>
        <Link href="#">
          Αλλαγή<VisuallyHidden>τηλεφώνου</VisuallyHidden>
        </Link>
      </SummaryListItemAction>
    </SummaryListItem>
  </SummaryList>
);

export default WithoutBorders;