import Link from "next/link";
import { ArrowRight } from "lucide-react";
import { SafeImage } from "@/components/ui/SafeImage";
import type { PartCategory } from "@/lib/mock-data";

type PartsCategoryGridProps = {
  partCategories: PartCategory[];
};

export function PartsCategoryGrid({ partCategories }: PartsCategoryGridProps) {
  return (
    <section className="bg-white py-10">
      <div className="container-custom">
        <div className="mb-5 flex items-center justify-between gap-4">
          <h2 className="text-2xl font-bold text-navy-deep">Shop by Category</h2>
          <Link
            href="/parts"
            className="inline-flex items-center gap-2 text-sm font-semibold text-primary"
          >
            View All Categories <ArrowRight className="h-4 w-4" />
          </Link>
        </div>
        <div className="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-5">
          {partCategories.map((category) => (
            <Link
              href={`#${category.slug}`}
              id={category.slug}
              className="soft-card p-4 text-center transition hover:-translate-y-0.5 hover:border-primary/40"
              key={category.id}
            >
              <SafeImage
                src={category.image}
                alt={category.name}
                className="aspect-[4/3] w-full rounded-2xl bg-primary-soft object-cover"
                fallbackSrc="/images/backgrounds/hero-bg-general.png"
              />
              <h3 className="mt-3 text-base font-bold text-navy-deep">
                {category.name}
              </h3>
            </Link>
          ))}
        </div>
      </div>
    </section>
  );
}