import Link from "next/link";
import { cn } from "@/lib/utils";

export interface GuaGridItem {
  num: string;
  name: string;
  href: string;
}

export function GuaGrid({ items }: { items: GuaGridItem[] }) {
  return (
    <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
      {items.map(({ num, name, href }) => (
        <Link
          key={href}
          href={href}
          className={cn(
            "zen-card group relative flex flex-col items-center justify-center rounded-xl border border-border/50",
            "bg-card/70 px-3 py-4 text-center shadow-sm transition-all duration-300",
            "hover:-translate-y-0.5 hover:border-primary/30 hover:shadow-md",
          )}
        >
          <span className="mb-2 flex h-10 w-10 items-center justify-center rounded-full border border-border/60 bg-secondary/80 font-mono text-sm text-muted-foreground transition-colors group-hover:border-primary/40 group-hover:text-primary">
            {num}
          </span>
          <span className="line-clamp-2 text-sm leading-snug text-foreground group-hover:text-primary">
            {name}
          </span>
        </Link>
      ))}
    </div>
  );
}