import React from 'react';

import {
  SummaryList,
  SummaryListItem,
  SummaryListItemKey,
  SummaryListItemValue,
  SummaryListItemAction,
} from '@digigov/ui/content/SummaryList';
import { Link } from '@digigov/ui/navigation/Link';
import { TabsHeading, TabsList } from '@digigov/ui/navigation/Tabs';
import {
  TabsAuto,
  TabsListItem,
  TabsPanel,
} from '@digigov/ui/navigation/Tabs/auto';
import { Heading } from '@digigov/ui/typography/Heading';
import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';

export function Auto(_: any) {
  return (
    <TabsAuto defaultOpen={'b'}>
      <TabsHeading size="md">Περιεχόμενα</TabsHeading>
      <TabsList>
        <TabsListItem id="a">Στοιχεία πολίτη</TabsListItem>
        <TabsListItem id="b">Yποθέσεις</TabsListItem>
      </TabsList>
      <TabsPanel tab="a">
        <Heading size="md" element="h3">
          Στοιχεία πολίτη
        </Heading>
        <SummaryList>
          <SummaryListItem>
            <SummaryListItemKey>Όνομα</SummaryListItemKey>
            <SummaryListItemValue>Γιώργος Παπαδόπουλος</SummaryListItemValue>
            <SummaryListItemAction>
              {' '}
              <Link href="#">
                Αλλαγή <VisuallyHidden> ονόματος </VisuallyHidden>
              </Link>
            </SummaryListItemAction>
          </SummaryListItem>
          <SummaryListItem>
            <SummaryListItemKey>Ημ. Γέννησης</SummaryListItemKey>
            <SummaryListItemValue>11 Μαϊου 1990</SummaryListItemValue>
          </SummaryListItem>
          <SummaryListItem>
            <SummaryListItemKey>Τηλέφωνο επικοινωνίας</SummaryListItemKey>
            <SummaryListItemValue>6941234567</SummaryListItemValue>
            <SummaryListItemAction>
              {' '}
              <Link>
                {' '}
                Αλλαγή <VisuallyHidden> τηλεφώνου </VisuallyHidden>
              </Link>
            </SummaryListItemAction>
          </SummaryListItem>
        </SummaryList>
      </TabsPanel>
      <TabsPanel tab="b">
        <Heading size="md" element="h3">
          Yποθέσεις
        </Heading>
        Περιεχόμενα υποθέσεων
      </TabsPanel>
    </TabsAuto>
  );
}

export default Auto;