import Link from "next/link";
import type { ToolEntry } from "@/lib/tool-catalog";

export function ToolGrid({ tools, dense = false }: { tools: ToolEntry[]; dense?: boolean }) {
  return (
    <div
      className={
        dense
          ? "grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4 lg:gap-4"
          : "grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-3 lg:gap-4"
      }
    >
      {tools.map(({ slug, title, desc, Icon, badge, iconAccent, available }) => {
        const cardContent = (
          <>
            <div
              className={`text-brand-gold mb-3 flex h-10 w-10 items-center justify-center rounded-md ${
                iconAccent === "red"
                  ? "bg-brand-red/10 group-hover:bg-brand-red/20"
                  : "bg-brand-gold/10 group-hover:bg-brand-gold/20"
              }`}
            >
              <Icon className="h-5 w-5" aria-hidden="true" />
            </div>
            <h3 className="font-display text-ink-primary text-base font-semibold">{title}</h3>
            <p className="text-ink-muted mt-1 line-clamp-2 text-xs">{desc}</p>
            {badge ? (
              <span
                className={`mt-2 inline-block text-[10px] tracking-wider uppercase ${
                  badge.tone === "popular" ? "text-brand-gold-soft" : "text-brand-red-light"
                }`}
              >
                {badge.label}
              </span>
            ) : !available ? (
              <span className="text-ink-muted mt-2 inline-block text-[10px] tracking-wider uppercase">
                Sắp ra mắt
              </span>
            ) : null}
          </>
        );

        if (available) {
          return (
            <Link
              key={slug}
              href={`/${slug}`}
              className="group border-stroke-subtle bg-bg-elevated/40 hover:border-brand-gold/40 hover:bg-bg-elevated/80 rounded-xl border p-4 transition hover:-translate-y-0.5 lg:p-5"
            >
              {cardContent}
            </Link>
          );
        }

        return (
          <div
            key={slug}
            aria-disabled="true"
            className="group border-stroke-subtle/50 bg-bg-elevated/20 cursor-not-allowed rounded-xl border p-4 opacity-60 lg:p-5"
          >
            {cardContent}
          </div>
        );
      })}
    </div>
  );
}