import Link from "next/link";
import { ChevronRight } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { Separator } from "@/components/ui/separator";
import type { ToolDefinition } from "@/types/tools";

interface ToolPageShellProps {
  tool: ToolDefinition;
  children: React.ReactNode;
  statusLabel?: string;
  actionSlot?: React.ReactNode;
}

export function ToolPageShell({ tool, children, statusLabel = "Ready", actionSlot }: ToolPageShellProps) {
  const Icon = tool.icon;

  return (
    <div className="animate-fade-up space-y-6">
      <section className="glass-panel panel-elevated rounded-2xl border border-white/15 p-5 sm:p-6">
        <div className="flex flex-wrap items-center justify-between gap-4">
          <div className="space-y-3">
            <div className="flex items-center gap-2 text-sm text-slate-400">
              <Link className="rounded px-1 transition hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-300/60" href="/">
                Dashboard
              </Link>
              <ChevronRight className="size-4" />
              <span>{tool.title}</span>
            </div>
            <div className="space-y-2">
              <h1 className="font-[var(--font-space-grotesk)] text-2xl font-semibold tracking-tight text-white sm:text-3xl">
                {tool.title}
              </h1>
              <p className="max-w-2xl text-sm text-slate-300 sm:text-base">{tool.description}</p>
            </div>
          </div>
          <div className="flex items-center gap-2">
            <Badge className={tool.accent.badgeClass}>
              <Icon className="size-3.5" />
              {statusLabel}
            </Badge>
            {actionSlot}
          </div>
        </div>
      </section>
      <Separator className="bg-white/10" />
      {children}
    </div>
  );
}
