import Link from "next/link";
import type { SanityDocument } from "next-sanity";
import { client } from "@/sanity/lib/client";
import { urlFor } from "@/sanity/lib/image";
import { ARTICLES_QUERY } from "@/sanity/lib/queries";

export const metadata = {
  title: "Articles | Cellar Labels",
};

const options = { next: { revalidate: 60 } };

export default async function ArticlesPage() {
  const articles = await client.fetch<SanityDocument[]>(
    ARTICLES_QUERY,
    {},
    options,
  );

  return (
    <main className="mx-auto max-w-6xl px-6 py-16">
      <h1 className="font-heading text-4xl font-semibold text-terracotta">
        Articles
      </h1>

      {articles.length === 0 ? (
        <p className="mt-8 text-charcoal/60">No articles published yet.</p>
      ) : (
        <ul className="mt-10 grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
          {articles.map((article) => (
            <li key={article._id}>
              <Link href={`/articles/${article.slug.current}`} className="group block">
                {article.coverImage && (
                  <div className="aspect-video overflow-hidden rounded-lg bg-warm-white">
                    {/* eslint-disable-next-line @next/next/no-img-element */}
                    <img
                      src={urlFor(article.coverImage).width(600).height(338).url()}
                      alt=""
                      className="h-full w-full object-cover transition group-hover:scale-105"
                    />
                  </div>
                )}
                <h2 className="mt-4 font-heading text-2xl font-semibold text-charcoal group-hover:text-terracotta">
                  {article.title}
                </h2>
                <p className="mt-1 text-sm text-charcoal/60">
                  {new Date(article.publishedAt).toLocaleDateString()}
                </p>
              </Link>
            </li>
          ))}
        </ul>
      )}
    </main>
  );
}