import React from 'react';
import SafeHTML from '@digigov/ui/content/SafeHTML';
import { SectionBreak } from '@digigov/ui/layouts';
import Grid from '@digigov/ui/layouts/Grid';

const htmlExamples = [
  '<h1>Παράδειγμα h1</h1>',
  'Προς:<sup>(1)</sup>',
  '<a target="_blank" href="http://www.astynomia.gr/index.php?option=ozo_content&perform=view&id=139&Itemid=132&lang">εδώ</a>',
  `Μπορείτε να αιτηθείτε για απόσπασμα Ληξιαρχικής Πράξης που:<br/><br/>
  • εκδόθηκε μετά τις 08/05/2013<br/>
  • μεταβλήθηκε ή εκδόθηκε απόσπασμά της μετά το 2018<br/>
  • εκδόθηκε από το Ειδικό Ληξιαρχείο Αθηνών μετά τις 22/01/2018 και αφορά γεγονότα που τελέστηκαν στο εξωτερικό<br/>`,
  `Εάν είστε εκπαιδευτικός (δημοσίου ή ιδιωτικού σχολείου) ή ανήκετε
    σε κάποια άλλη κατηγορία ατόμων που πρέπει να προσκομίσουν δήλωση
    αποτελέσματος για την πρόσβαση σε σχολική μονάδα,
    συμπληρώστε το πεδίο <b>Όνομα σχολείου</b>, διαφορετικά αφήστε το κενό.`,
  'Μπορείτε να εκδώσετε τα παρακάτω έγγραφα: <ul><li>Πιστοποιητικό γάμου</li><li>Βεβαίωση οικογενειακής κατάστασης</li></ul>',
  'Μπορείτε να εκδώσετε τα παρακάτω έγγραφα: <ol><li>Πιστοποιητικό γάμου</li><li>Βεβαίωση οικογενειακής κατάστασης</li></ol>',
];

export const Default = (_: any) => {
  return (
    <>
      {htmlExamples.map((html, index) => (
        <Grid container key={index} spacing={4}>
          <Grid item xs={12} sm={6}>
            {html}
          </Grid>
          <Grid item xs={12} sm={6}>
            <SafeHTML content={html} />
          </Grid>
          <Grid item xs={12}>
            <SectionBreak />
          </Grid>
        </Grid>
      ))}
    </>
  );
};

export default Default;