import { Badge } from "@/components/ui/badge";
import { getToolIconForFuture } from "@/lib/tools-registry";
import type { FutureToolDefinition } from "@/types/tools";

interface FutureToolsProps {
  tools: FutureToolDefinition[];
}

export function FutureTools({ tools }: FutureToolsProps) {
  return (
    <section id="future-tools" className="space-y-4">
      <div>
        <h2 className="font-[var(--font-space-grotesk)] text-xl font-semibold text-white sm:text-2xl">
          Future Tools
        </h2>
        <p className="text-sm text-slate-400">
          The architecture is prepared for these modules next.
        </p>
      </div>
      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
        {tools.map((tool) => {
          const Icon = getToolIconForFuture(tool.slug);
          return (
            <article
              key={tool.slug}
              className="interactive-card rounded-xl border border-white/10 bg-slate-900/50 p-4"
            >
              <div className="flex items-center justify-between">
                <div className="inline-flex items-center gap-2">
                  <span className="inline-flex size-8 items-center justify-center rounded-lg border border-white/10 bg-slate-800/80">
                    <Icon className="size-4 text-slate-300" />
                  </span>
                  <h3 className="font-medium text-slate-100">{tool.title}</h3>
                </div>
                <Badge className="border-white/15 bg-white/5 text-slate-300">Roadmap</Badge>
              </div>
              <p className="mt-3 text-sm leading-relaxed text-slate-400">{tool.description}</p>
            </article>
          );
        })}
      </div>
    </section>
  );
}
