---
import Base from "../../layouts/Base.astro";
import PageHero from "../PageHero.astro";
import { prorockReleases } from "../../data/prorock-updates";
import { type Locale } from "../../i18n";

interface Props {
  locale: Locale;
}
const { locale } = Astro.props;
const releases = prorockReleases[locale];

const copy = {
  en: {
    title: "Prorock updates",
    description: "Release history of the Prorock software",
    heroTitle: "Prorock updates",
    heroSubtitle: "Changelog of the Prorock software suite",
  },
  ru: {
    title: "Обновления Prorock",
    description: "История обновлений ПО Prorock",
    heroTitle: "Обновления Prorock",
    heroSubtitle: "История изменений программного комплекса Prorock",
  },
}[locale];
---

<Base title={copy.title} description={copy.description} locale={locale}>
  <PageHero title={copy.heroTitle} subtitle={copy.heroSubtitle} />

  <section class="bg-white">
    <div class="mx-auto max-w-4xl px-4 py-16 sm:px-6">
      {releases.map((r) => (
        <article class="rounded-2xl border border-slate-200 p-8">
          <header class="flex flex-wrap items-baseline justify-between gap-2 border-b border-slate-200 pb-5">
            <h2 class="text-2xl font-bold text-night-950">Release {r.version}</h2>
            <time class="text-sm font-medium text-slate-500">{r.date}</time>
          </header>
          {r.sections.map((s) => (
            <div class="mt-7">
              <h3 class="text-lg font-semibold text-accent-600">{s.title}</h3>
              <ul class="mt-3 space-y-2.5">
                {s.items.map((item) => (
                  <li class="flex gap-3 text-sm leading-relaxed text-slate-700">
                    <span class="mt-2 h-1.5 w-1.5 shrink-0 rounded-full bg-accent-400" aria-hidden="true" />
                    {item}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </article>
      ))}
    </div>
  </section>
</Base>