import { categories } from "@/data/content";
import { toFaDigits } from "@/lib/format";
import { Placeholder } from "./Placeholder";
import { SectionHeading } from "./SectionHeading";

export function FeaturedCategories() {
  return (
    <section id="categories" className="container-nn py-8">
      <SectionHeading english="Little Wardrobe" title="دسته‌بندی‌های محبوب" />
      <div className="grid grid-cols-2 gap-3 sm:grid-cols-4 lg:grid-cols-8">
        {categories.map((category) => (
          <a
            key={category.id}
            href="#"
            className="glass-box group rounded-3xl p-3 text-center shadow-soft transition hover:-translate-y-1"
          >
            <Placeholder
              width={160}
              height={160}
              tone={category.tone}
              rounded="rounded-2xl"
            />
            <h3 className="mt-3 text-sm font-bold text-ink">{category.title}</h3>
            <p className="text-xs text-muted">{toFaDigits(category.count)} مدل</p>
          </a>
        ))}
      </div>
    </section>
  );
}