import { Hammer } from "lucide-react";

import { Badge } from "@/components/ui/badge";

interface ToolPlaceholderProps {
  title: string;
  description: string;
  upcoming: string[];
}

export function ToolPlaceholder({ title, description, upcoming }: ToolPlaceholderProps) {
  return (
    <section className="glass-panel rounded-2xl border border-white/15 p-6">
      <div className="flex flex-wrap items-center justify-between gap-3">
        <div>
          <h2 className="font-[var(--font-space-grotesk)] text-xl font-semibold text-white">{title}</h2>
          <p className="mt-2 max-w-2xl text-sm text-slate-300">{description}</p>
        </div>
        <Badge className="border-amber-300/35 bg-amber-400/20 text-amber-100">
          <Hammer className="size-3.5" />
          Phase 1 Placeholder
        </Badge>
      </div>
      <div className="mt-5 rounded-xl border border-white/10 bg-slate-900/55 p-4">
        <p className="text-xs uppercase tracking-[0.12em] text-slate-400">Planned In Next Phase</p>
        <ul className="mt-3 grid gap-2 text-sm text-slate-200 sm:grid-cols-2">
          {upcoming.map((item) => (
            <li key={item} className="rounded-md border border-white/10 bg-white/5 px-3 py-2">
              {item}
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}
