arjmand-pharmacy/components/home/FeaturedCategories.tsx

import type { ReactNode } from "react";
import Link from "next/link";
import { Container } from "@/components/Container";
import { SlotMedia } from "@/components/SlotMedia";
import { categories } from "@/lib/data";
import type { SlotMediaItem } from "@/lib/static-images";

function CardWrap({ href, children }: { href?: string; children: ReactNode }) {
  const className =
    "group flex flex-col items-center gap-2 rounded-2xl bg-white p-3 text-center transition hover:-translate-y-0.5";
  if (!href) return <div className={className}>{children}</div>;
  if (href.startsWith("/") || href.startsWith("#")) {
    return (
      <Link href={href} className={className}>
        {children}
      </Link>
    );
  }
  return (
    <a href={href} className={className}>
      {children}
    </a>
  );
}

export function FeaturedCategories({
  items,
  aspectRatio,
}: {
  items?: SlotMediaItem[];
  aspectRatio?: string;
}) {
  const list: SlotMediaItem[] =
    items && items.length > 0
      ? items
      : categories.map((category) => ({
          id: category.id,
          image: category.image,
          href: category.href,
          title: category.title,
        }));

  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">
          {list.map((category) => (
            <CardWrap key={category.id} href={category.href}>
              <span className="grid size-[72px] place-items-center overflow-hidden rounded-2xl bg-sky sm:size-[84px]">
                <SlotMedia
                  src={category.image}
                  fallbackSrc={category.fallbackSrc}
                  aspectRatio={aspectRatio}
                  className="size-full overflow-hidden rounded-2xl"
                  imgClassName="absolute inset-0 size-full object-cover"
                />
              </span>
              {category.title ? (
                <span className="text-[12px] font-medium text-ink group-hover:text-primary sm:text-[13px]">
                  {category.title}
                </span>
              ) : null}
            </CardWrap>
          ))}
        </div>
      </Container>
    </section>
  );
}