"use client";

import { notFound, useParams } from "next/navigation";
import { SiteHeader } from "@/components/site-header";
import { ToolRunner } from "@/components/tool-runner";
import { getToolConfig } from "@/lib/tool-configs";

export default function ToolPage() {
  const params = useParams<{ slug: string }>();
  const tool = getToolConfig(params.slug);
  if (!tool) notFound();

  return (
    <div className="min-h-screen bg-slate-50 dark:bg-slate-900">
      <SiteHeader />
      <main className="mx-auto max-w-3xl px-4 py-10">
        <div className="mb-8 text-center">
          <h1 className="text-3xl font-bold text-slate-900 dark:text-slate-100">{tool.name}</h1>
          <p className="mt-2 text-slate-500 dark:text-slate-400">{tool.description}</p>
        </div>
        <ToolRunner tool={tool} />
      </main>
    </div>
  );
}