import { ToolCard } from "./ToolCard";
import type { Tool } from "@/tools/registry";

interface RelatedToolsProps {
  tools: Tool[];
}

export function RelatedTools({ tools }: RelatedToolsProps) {
  if (!tools.length) return null;

  return (
    <section className="mt-12">
      <p
        className="mb-1 text-[0.7rem] font-bold uppercase tracking-[0.18em] text-ink-secondary"
        style={{ fontFamily: '"Courier New", monospace' }}
      >
        Weitere Platten
      </p>
      <h2 className="mb-6 font-display text-xl font-bold uppercase tracking-tight text-ink-primary">
        Ähnliche Tools
      </h2>
      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
        {tools.map((tool) => (
          <ToolCard key={tool.slug} tool={tool} />
        ))}
      </div>
    </section>
  );
}