import { Button, Footer, Navbar, ProjectItem } from "~/components";
import type { Route } from "./+types";
import type { NavLink } from "react-router";
import { getRecentBlogPosts, getProjectItems } from "~/sanity/client";
import { generateMetaTags, SITE_CONFIG, schemaToJsonLd, generateBreadcrumbList } from "~/lib/utils";

export function meta({}: Route.MetaArgs) {
  const breadcrumbs = generateBreadcrumbList([
    { name: 'Home', url: SITE_CONFIG.siteUrl },
    { name: 'Projects', url: `${SITE_CONFIG.siteUrl}/projects` },
  ]);

  const metaTags = generateMetaTags({
    title: 'Featured Projects',
    description: 'Explore our portfolio of successful branding projects. See how we help businesses align purpose with performance.',
    url: `${SITE_CONFIG.siteUrl}/projects`,
    type: 'website',
  });

  return [
    ...metaTags,
    schemaToJsonLd(breadcrumbs),
  ];
}

export async function loader() {
  const projects = await getProjectItems(6);
  return { projects };
}

export default function Projects({ loaderData }: Route.ComponentProps) {
  const { projects } = loaderData;
  return (
    <div>
      <Navbar />
      <div className="min-h-screen flex flex-col items-center justify-center bg-gray-100 p-6">
        <div className="text-center mt-20">
          <h2 className="font-bold uppercase text-4xl">Featured Projects</h2>
          <p>A look at some of the projects in our portfolio of works</p>
        </div>
        <section className="p-0 mx-6 my-10">
          <div className="max-w-6xl mx-auto md:columns-3 gap-6  lg:gap-16">
            {projects.map((item) => (
              <ProjectItem key={item._id} item={item} />
            ))}
          </div>
        </section>
      </div>
      <Footer />
    </div>
  );
}
