import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import { Icon } from "@/components/icons";
import { programmes } from "@/data/site";

type Props = { params: Promise<{ slug: string }> };

export function generateStaticParams() {
  return programmes.map(({ slug }) => ({ slug }));
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params;
  const programme = programmes.find((item) => item.slug === slug);
  if (!programme) return {};
  return {
    title: programme.title,
    description: programme.summary,
  };
}

export default async function ProgrammePage({ params }: Props) {
  const { slug } = await params;
  const programme = programmes.find((item) => item.slug === slug);
  if (!programme) notFound();

  const related = programmes
    .filter((item) => item.slug !== programme.slug)
    .slice(0, 3);

  return (
    <>
      <section className={`programme-hero ${programme.tone}`}>
        <div className="shell programme-hero-grid">
          <div>
            <span className="eyebrow light">
              Programme {programme.number}
            </span>
            <h1>{programme.title}</h1>
            <p>{programme.tagline}</p>
          </div>
          <div className="programme-hero-icon" aria-hidden="true">
            <Icon name={programme.icon} />
          </div>
        </div>
      </section>

      <section className="section programme-detail">
        <div className="shell detail-grid">
          <aside>
            <span>Our focus</span>
            <h2>{programme.tagline}</h2>
          </aside>
          <div className="detail-copy">
            <p className="lead">{programme.summary}</p>
            {programme.details.map((paragraph) => (
              <p key={paragraph}>{paragraph}</p>
            ))}
            <div className="detail-cta">
              <strong>{programme.cta}</strong>
              <Link className="button button-dark" href="/contact">
                Contact our team <Icon name="arrow" />
              </Link>
            </div>
          </div>
        </div>
      </section>

      <section className="related section">
        <div className="shell">
          <div className="section-heading">
            <div>
              <span className="eyebrow">Connected work</span>
              <h2>Explore more programmes.</h2>
            </div>
            <Link className="text-link" href="/#programmes">
              View all programmes <Icon name="arrow" />
            </Link>
          </div>
          <div className="related-grid">
            {related.map((item) => (
              <Link href={`/programmes/${item.slug}`} key={item.slug}>
                <span>{item.number}</span>
                <Icon name={item.icon} />
                <h3>{item.shortTitle}</h3>
                <Icon className="related-arrow" name="arrow" />
              </Link>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}