import { Link } from 'react-router-dom'
import { AcademyLayout } from '../../academy/AcademyLayout'
import { Icon } from '../../components/Icon'
import { useLegal } from '../../lib/useLegal'

/**
 * Strona regulaminu albo polityki prywatnosci.
 *
 * Tresc pochodzi z gotowych, wbudowanych dokumentow (backend sklada je z danych
 * firmy z ustawien). Administrator nie pisze prawa - dokumenty sa zawsze
 * obecne, a w miejsce danych firmy podstawiane sa wartosci z konfiguracji.
 * Obowiazek informacyjny RODO jest juz czescia tresci polityki, wiec strona
 * tylko ja wyswietla.
 *
 * UZYWA `AcademyLayout`, nie `PublicLayout`.
 * ---------------------------------------------------------------------------
 * Regulamin i polityka to strony serwisu, do ktorych uzytkownik trafia ze
 * stopki strony glownej, wiec maja miec ten sam naglowek i te sama stopke co
 * strona glowna: pasek nawigacji (Kursy/Webinary/Cennik), odnosnik do panelu
 * albo konta zaleznie od zalogowania oraz logo linkujace do strony glownej.
 * `PublicLayout` jest waski i pozbawiony nawigacji - pasuje do formularza
 * zapisu otwieranego z linku w mailu, nie do samodzielnej strony serwisu.
 */
export function LegalPage({ kind }: { kind: 'terms' | 'privacy' }) {
  const legal = useLegal()

  const title = kind === 'terms' ? 'Regulamin' : 'Polityka prywatności'
  const html = kind === 'terms' ? legal.data?.termsHtml : legal.data?.privacyHtml

  return (
    <AcademyLayout>
      <article className="space-y-6">
        {/* Wyrazny powrot do strony glownej nad tytulem, obok logo w naglowku. */}
        <Link
          to="/"
          className="inline-flex items-center gap-1.5 text-sm text-slate-500 transition-colors duration-fast hover:text-slate-900"
        >
          <Icon name="arrow-left" size={16} />
          Strona główna
        </Link>

        <h1 className="text-2xl font-semibold text-slate-900">{title}</h1>

        {legal.isPending ? (
          <p className="text-sm text-slate-500">Wczytywanie...</p>
        ) : (
          // tresc jest skladana po stronie serwera z zaufanych stalych i
          // escapowanych danych firmy - nie przechodzi przez edytor uzytkownika
          <div
            className="prose prose-slate max-w-none"
            dangerouslySetInnerHTML={{ __html: html ?? '' }}
          />
        )}
      </article>
    </AcademyLayout>
  )
}