import type { Metadata } from "next";
import Image from "next/image";
import Link from "next/link";
import { BlogLoadMore } from "@/components/blog/BlogLoadMore";
import { IconArrow } from "@/components/icons";
import { PageHero } from "@/components/PageHero";
import { type BlogPost, blogPosts } from "@/lib/content";
import { site } from "@/lib/site";

const description = `News, research and practical security advice from the ${site.name} team.`;

export const metadata: Metadata = {
  title: "Blog",
  description,
  openGraph: { title: `Blog | ${site.name}`, description },
  twitter: { title: `Blog | ${site.name}`, description },
};

const FIRST_PAGE = 6;
const LOAD_MORE_COUNT = 3;

function PostCard({ post, priority }: { post: BlogPost; priority?: boolean }) {
  return (
    <div className="col-12 col-md-6 col-lg-4">
      <div className="bento-card" data-reveal>
        <Image
          src="/assets/img/placeholder.svg"
          alt=""
          width={800}
          height={500}
          className="img-fluid mb-3 mb-md-4 b-rounded-lg"
          priority={priority}
        />
        <h3 className="text-limit-1">{post.title}</h3>
        <p className="text-limit-2">{post.excerpt}</p>
        <div className="d-flex justify-content-between align-items-center gap-2 mt-auto pt-md-4 pt-3">
          <p className="bc-n mb-0">{post.date}</p>
          <Link
            className="btn-av min-w-fit-content py-2 ps-3"
            href={`/blog/${post.slug}`}
          >
            Read Article{" "}
            <span className="btn-arrow">
              <IconArrow />
            </span>
          </Link>
        </div>
      </div>
    </div>
  );
}

export default function BlogPage() {
  const firstPage = blogPosts.slice(0, FIRST_PAGE);
  const rest = blogPosts.slice(FIRST_PAGE, FIRST_PAGE + LOAD_MORE_COUNT);

  return (
    <>
      <PageHero
        title="The GPTDefend"
        accent="Blog"
        lead="Explore practical security tips, emerging threats, and methods to navigate the digital world intelligently with GPTDefend."
      />

      <section className="section blog-page">
        <div className="container">
          <div className="row g-4 g-lg-3 g-xl-4">
            {firstPage.map((post, i) => (
              <PostCard key={post.slug} post={post} priority={i < 3} />
            ))}
          </div>

          {rest.length ? (
            <BlogLoadMore>
              {rest.map((post) => (
                <PostCard key={post.slug} post={post} />
              ))}
            </BlogLoadMore>
          ) : null}
        </div>
      </section>
    </>
  );
}