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 WithError = (_: any) => (
  <SummaryList error>
    <SummaryListItem>
      <SummaryListItemKey>Όνομα</SummaryListItemKey>
      <SummaryListItemValue>Γιώργος Παπαδόπουλος</SummaryListItemValue>
      <SummaryListItemAction>
        <Link href="#">
          Αλλαγή<VisuallyHidden>Διεύθυνσης</VisuallyHidden>
        </Link>
      </SummaryListItemAction>
    </SummaryListItem>
    <SummaryListItem>
      <SummaryListItemKey error>Ημερομηνία Γέννησης</SummaryListItemKey>
      <SummaryListItemValue>11 Μαϊου 1990</SummaryListItemValue>
      <SummaryListItemAction>
        <Link href="#">
          Αλλαγή<VisuallyHidden>Διεύθυνσης</VisuallyHidden>
        </Link>
      </SummaryListItemAction>
    </SummaryListItem>
    <SummaryListItem>
      <SummaryListItemKey>Τηλέφωνο επικοινωνίας</SummaryListItemKey>
      <SummaryListItemValue error errorAssistiveText="το τηλέφωνο δεν βρέθηκε">
        6941234567
      </SummaryListItemValue>
      <SummaryListItemAction>
        <Link href="#">
          Αλλαγή<VisuallyHidden>Διεύθυνσης</VisuallyHidden>
        </Link>
      </SummaryListItemAction>
    </SummaryListItem>
  </SummaryList>
);

export default WithError;