import React from 'react';

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

export function Dense(_: any) {
  const { register, panel } = useTabs();
  return (
    <Tabs dense>
      <TabsHeading size="md">Περιεχόμενα</TabsHeading>
      <TabsList>
        <TabsListItem {...register('a')}>Στοιχεία πολίτη</TabsListItem>
        <TabsListItem {...register('b')}>Yποθέσεις</TabsListItem>
      </TabsList>
      <TabsPanel {...panel('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 {...panel('b')}>
        <Heading size="md" element="h3">
          Yποθέσεις
        </Heading>
        Περιεχόμενα υποθέσεων
      </TabsPanel>
    </Tabs>
  );
}

export default Dense;