// /components/builder/OverlapChip.tsx
"use client";

import { useEffect, useState } from "react";

export default function OverlapChip(props: {
  tone?: "warning" | "info";
  label: string;
  detail?: string;
}) {
  const { tone = "info", label, detail } = props;

  const [ready, setReady] = useState(false);
  useEffect(() => {
    const id = window.setTimeout(() => setReady(true), 10);
    return () => window.clearTimeout(id);
  }, []);

  const base =
    "inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[0.65rem] leading-4 transition-all duration-200";
  const pop = ready ? "opacity-100 scale-100" : "opacity-0 scale-95";

  const toneCls =
    tone === "warning"
      ? "border-amber-400/40 bg-amber-400/10 text-amber-200"
      : "border-zinc-700 bg-zinc-900/60 text-zinc-200";

  return (
    <span className={`${base} ${toneCls} ${pop}`} title={detail ?? label}>
      <span className="font-medium">{label}</span>
      {detail ? <span className="text-zinc-400">· {detail}</span> : null}
    </span>
  );
}