import { Head, Link } from "@inertiajs/react";
import { Nav } from "@/components/sections/Nav";
import { Footer } from "@/components/sections/Footer";

interface Post {
  title: string;
  slug: string;
  excerpt: string | null;
  body: string;
  image_url: string | null;
  category: string;
  published_at: string;
}

export default function NewsShow({ post }: { post: Post }) {
  return (
    <>
      <Head title={post.title} />
      <Nav />

      <main className="mt-18">
        {post.image_url && (
          <div className="h-72 w-full overflow-hidden md:h-96">
            <img src={post.image_url} alt={post.title} className="h-full w-full object-cover" />
          </div>
        )}

        <article className="mx-auto max-w-3xl px-6 py-14">
          <Link
            href="/newsletter"
            className="mb-8 inline-flex items-center gap-1.5 text-sm text-secondary hover:text-navy"
          >
            ← Back to News &amp; Updates
          </Link>

          <span className="mb-3 block text-xs font-semibold uppercase tracking-widest text-amber">
            {post.category}
          </span>

          <h1 className="font-serif text-3xl leading-snug text-navy md:text-4xl">{post.title}</h1>

          <p className="mt-3 text-sm text-muted">
            {new Date(post.published_at).toLocaleDateString("en-GB", {
              day: "numeric",
              month: "long",
              year: "numeric",
            })}
          </p>

          {post.excerpt && (
            <p className="mt-6 text-lg font-medium text-secondary">{post.excerpt}</p>
          )}

          <div
            className="prose prose-navy mt-8 max-w-none text-body [&_h2]:font-serif [&_h2]:text-navy [&_a]:text-amber [&_a]:underline"
            dangerouslySetInnerHTML={{ __html: post.body }}
          />
        </article>
      </main>

      <Footer />
    </>
  );
}
