import { Hammer } from "lucide-react";
import { Badge } from "../ui";

// 规划中模块占位 —— 深色，露出信息架构与定位。
export function Placeholder({ title, desc }: { title: string; desc: string }) {
  return (
    <div className="flex h-full items-center justify-center p-8">
      <div className="max-w-md rounded-lg border border-dashed border-line bg-ink-900 p-8 text-center">
        <div className="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-xl border border-line bg-ink-850 text-slate-500">
          <Hammer className="h-6 w-6" strokeWidth={1.5} />
        </div>
        <div className="mb-2 text-base font-medium text-slate-200">{title}</div>
        <p className="text-sm leading-relaxed text-slate-500">{desc}</p>
        <div className="mt-4">
          <Badge tone="warn">规划中</Badge>
        </div>
      </div>
    </div>
  );
}