import React from 'react';

import {
  Accordion,
  AccordionSection,
  AccordionSectionContent,
  AccordionSectionSummary,
  AccordionSectionSummaryHeading,
} from '@digigov/ui/content/Accordion';

import { List } from '@digigov/ui/content/List/List';
import { ListItem } from '@digigov/ui/content/List/ListItem';
import { Link } from '@digigov/ui/navigation/Link';
import { Hint } from '@digigov/ui/typography/Hint';
import { Paragraph } from '@digigov/ui/typography/Paragraph';

export const WithHints = (_: any) => (
  <Accordion>
    <AccordionSection open>
      <AccordionSectionSummary>
        <AccordionSectionSummaryHeading aria-controls="content1">
          Διαφορές με το δημόσιο
        </AccordionSectionSummaryHeading>
        <Hint>
          Δικαστικές και εξωδικαστικές διαφορές με το Δημόσιο, εκκαθάριση
          δικαστικών δαπανών κ.ά.
        </Hint>
      </AccordionSectionSummary>
      <AccordionSectionContent id="content1">
        <Paragraph>
          Παρακάτω μπορείτε να δείτε την διαθέσιμη και ενεργή υπηρεσία που αφορά
          το επιλεγμένο γεγονός ζωής.
        </Paragraph>
        <List>
          <ListItem>
            <Link>
              Αίτηση εξώδικης αναγνώρισης απαιτήσεων / συμβιβαστικής επίλυσης
              διαφορών με το Δημόσιο
            </Link>
          </ListItem>
        </List>
      </AccordionSectionContent>
    </AccordionSection>
    <AccordionSection>
      <AccordionSectionSummary>
        <AccordionSectionSummaryHeading aria-controls="content2">
          Δικαστήρια
        </AccordionSectionSummaryHeading>
        <Hint>Πιστοποιητικά δικαστηρίων, παρακολούθηση υποθέσεων κ.ά.</Hint>
      </AccordionSectionSummary>
      <AccordionSectionContent id="content2">
        <Paragraph>
          Στη λίστα παρακάτω μπορείτε να δείτε τις υπηρεσίες που αφορούν το
          επιλεγμένο γεγονός ζωής, κατηγοριοποιημένες σε ομάδες υπηρεσιών.
        </Paragraph>
        <List>
          <ListItem>
            <Link>Ενιαίο πιστοποιητικό δικαστικής φερεγγυότητας</Link>
          </ListItem>
          <ListItem>
            <Link>Ηλεκτρονικές δικαστικές αποφάσεις</Link>
          </ListItem>
          <ListItem>
            <Link>Πιστοποιητικά δικαστηρίων</Link>
          </ListItem>
        </List>
      </AccordionSectionContent>
    </AccordionSection>
    <AccordionSection>
      <AccordionSectionSummary>
        <AccordionSectionSummaryHeading aria-controls="content3">
          Δικόγραφα
        </AccordionSectionSummaryHeading>
        <Hint>Διαδικασίες για την κατάθεση δικογράφων</Hint>
      </AccordionSectionSummary>
      <AccordionSectionContent id="content3">
        <Paragraph>
          Στη λίστα παρακάτω μπορείτε να δείτε τις υπηρεσίες που αφορούν το
          επιλεγμένο γεγονός ζωής.
        </Paragraph>
        <List>
          <ListItem>
            <Link>Αντίγραφο πρακτικών υπόθεσης</Link>
          </ListItem>
          <ListItem>
            <Link>
              Ηλεκτρονική κατάθεση δικογράφων (Πολιτικά / Ποινικά Δικαστήρια)
            </Link>
          </ListItem>
        </List>
      </AccordionSectionContent>
    </AccordionSection>
  </Accordion>
);

export default WithHints;