import type { ReactNode } from "react";
import { ChapterNext } from "@/components/chapter-next";
import { PageHero } from "@/components/page-hero";
import { SpecsTable } from "@/components/specs-table";
import { StatsRow } from "@/components/stats-row";
import type { Vehicle } from "@/lib/content";

export function VehiclePage({
  vehicle,
  children,
}: {
  vehicle: Vehicle;
  children?: ReactNode;
}) {
  return (
    <article>
      <PageHero
        kicker={vehicle.kicker}
        name={vehicle.name}
        headline={vehicle.headline}
        lede={vehicle.lede}
        image={vehicle.heroImage}
      />
      <StatsRow id="overview" stats={vehicle.stats} />
      <div>
        {vehicle.blocks.map((block, i) => (
          <section key={block.title} className="relative min-h-[88dvh]">
            <img
              src={block.image}
              alt=""
              className="absolute inset-0 h-full w-full object-cover"
            />
            <div className="hero-scrim absolute inset-0" />
            <div
              className={`relative z-10 flex min-h-[88dvh] items-end px-6 py-20 sm:px-12 lg:px-20 ${
                i % 2 === 1 ? "justify-end" : ""
              }`}
            >
              <div className="max-w-xl">
                {block.kicker ? (
                  <p className="mb-2 font-display text-kicker font-medium uppercase tracking-wide">
                    {block.kicker}
                  </p>
                ) : null}
                <h2 className="font-display text-hero font-semibold uppercase leading-tight tracking-hero">
                  {block.title}
                </h2>
                <p className="mt-5 text-body leading-body text-fg/90">{block.body}</p>
                {block.specs ? <SpecsTable specs={block.specs} /> : null}
              </div>
            </div>
          </section>
        ))}
      </div>
      {children}
      <ChapterNext current={vehicle.chapter ?? "/"} />
    </article>
  );
}