import Link from "next/link";
import Image from "next/image";
import { categories } from "@/lib/data";
import { DrawFrame } from "./DrawFrame";

export function Categories() {
  return (
    <section className="container-site mt-12">
      <div className="flex items-end justify-between mb-6">
        <h2 className="section-title">دسته‌بندی‌ها</h2>
        <Link href="/products" className="text-sm text-brand">
          همه محصولات
        </Link>
      </div>
      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 md:gap-4">
        {categories.map((cat) => (
          <Link
            key={cat.slug}
            href={`/products/${cat.slug}`}
            className="draw-frame-host relative flex items-center gap-3 rounded-2xl border border-black/5 bg-zinc-50 px-3 py-2 text-brand"
          >
            <Image
              src={cat.image}
              alt={cat.name}
              width={88}
              height={88}
              className="size-[72px] sm:size-20 shrink-0 object-contain"
            />
            <span className="min-w-0">
              <span className="block text-lg font-medium text-ink leading-none">{cat.name}</span>
              <span dir="ltr" className="mt-1 block font-oswald text-[10px] font-normal tracking-[0.32em] text-zinc-400 uppercase">
                {cat.english}
              </span>
            </span>
            <DrawFrame />
          </Link>
        ))}
      </div>
    </section>
  );
}