import Link from "next/link";
import { Container } from "@/components/Container";
import { Placeholder } from "@/components/Placeholder";
import { categories } from "@/lib/data";

export function FeaturedCategories() {
  return (
    <section id="categories" className="pt-10">
      <Container>
        <div className="mb-5 flex items-end justify-between">
          <div>
            <h2 className="text-[18px] font-bold text-navy">دسته‌بندی‌های منتخب</h2>
            <p className="mt-1 text-[13px] text-muted">خرید سریع از دسته‌های پرمخاطب داروخانه</p>
          </div>
        </div>
        <div className="grid grid-cols-4 gap-3 md:grid-cols-8">
          {categories.map((category) => (
            <Link
              key={category.id}
              href={category.href}
              className="group flex flex-col items-center gap-2 rounded-2xl bg-white p-3 text-center transition hover:-translate-y-0.5"
            >
              <span className="grid size-[72px] place-items-center overflow-hidden rounded-2xl bg-sky sm:size-[84px]">
                <Placeholder src={category.image} className="size-full object-cover" />
              </span>
              <span className="text-[12px] font-medium text-ink group-hover:text-primary sm:text-[13px]">
                {category.title}
              </span>
            </Link>
          ))}
        </div>
      </Container>
    </section>
  );
}