import Image from "next/image";
import Link from "next/link";
import { PageContainer } from "@/components/layout/page-container";
import { getFeaturedCategories } from "@/lib/starter-data";

export async function LatestCategoriesSection() {
  const categories = await getFeaturedCategories();

  if (categories.length === 0) {
    return null;
  }

  return (
    <section className="py-20">
      <PageContainer className="space-y-8">
        <h2 className="text-[38px] font-bold leading-[1.2] tracking-[-0.03em] text-primary">
          Kategorije proizvoda
        </h2>
        <div className="grid gap-5 xl:grid-cols-5">
          {categories.map((category) => (
            <Link key={category.id} href={category.href} className="group block">
              <div className="relative aspect-[232/412] overflow-hidden rounded-[8px] bg-muted-surface">
                {category.image ? (
                  <Image
                    src={category.image.src}
                    alt={category.image.alt || category.name}
                    fill
                    sizes="(max-width: 1279px) 50vw, 20vw"
                    className="object-cover transition-transform duration-300 group-hover:scale-[1.01]"
                  />
                ) : null}
              </div>
              <div className="pt-[10px]">
                <p className="text-[16px] font-medium leading-6 tracking-[-0.02em] text-primary">
                  {category.name}
                </p>
              </div>
            </Link>
          ))}
        </div>
      </PageContainer>
    </section>
  );
}