import { Link, Navigate, useParams } from "react-router-dom";
import { AppText } from "../ui";
import { CookieSettings } from "./CookieBanner";
import { legalDocumentBySlug } from "./documents";
import { SiteFooter } from "./SiteFooter";

export function LegalPage() {
  const { slug } = useParams();
  const doc = legalDocumentBySlug(slug);

  if (!doc) {
    return <Navigate to="/legal/offer" replace />;
  }

  return (
    <div className="legal-page">
      <article className="legal-page__inner">
        <Link className="legal-page__back" to="/">
          ← Назад
        </Link>
        <header className="legal-page__meta">
          <AppText variant="largeTitle" as="h1">
            {doc.title}
          </AppText>
          <AppText variant="subhead">{doc.lead}</AppText>
        </header>
        {doc.sections.map((section) => (
          <section key={section.heading} className="legal-section">
            <h2>{section.heading}</h2>
            {section.blocks.map((block, index) =>
              block.type === "ul" ? (
                <ul key={index}>
                  {block.items.map((item) => (
                    <li key={item}>{item}</li>
                  ))}
                </ul>
              ) : (
                <p key={index}>{block.text}</p>
              ),
            )}
          </section>
        ))}
        {doc.slug === "cookies" ? <CookieSettings /> : null}
      </article>
      <SiteFooter />
    </div>
  );
}