// Components/Policy/PolicyUI.jsx
export function Pill({ children, active, onClick }) {
  return (
    <button
      type="button"
      onClick={onClick}
      className={[
        "rounded-xl cursor-pointer px-4 py-2 text-sm font-semibold transition border",
        active
          ? "bg-red-50 text-red-600 border-red-200"
          : "bg-white text-black/65 border-black/10 hover:bg-black/[0.03]",
      ].join(" ")}
    >
      {children}
    </button>
  );
}

export function ActionBtn({ icon, label, onClick }) {
  return (
    <button
      type="button"
      onClick={onClick}
      className="inline-flex cursor-pointer items-center gap-2 rounded-xl border border-black/10 bg-white px-4 py-2 text-sm font-semibold text-black/70 hover:bg-black/[0.03] transition"
    >
      {icon}
      {label}
    </button>
  );
}

export function Card({ title, children, className = "" }) {
  return (
    <div className={["rounded-3xl border border-black/10 bg-white shadow-sm p-5", className].join(" ")}>
      <div className="text-sm font-extrabold text-black/80">{title}</div>
      <div className="mt-4">{children}</div>
    </div>
  );
}

export function MetaItem({ label, value, highlight }) {
  return (
    <div className="rounded-2xl border border-black/10 bg-white px-3 py-2">
      <div className="text-[11px] font-semibold text-black/45">{label}</div>
      <div className={["text-sm font-semibold", highlight ? "text-red-500" : "text-black/75"].join(" ")}>
        {value}
      </div>
    </div>
  );
}

export function SummaryRow({ label, value, muted }) {
  return (
    <div className="rounded-2xl border border-black/10 bg-white px-4 py-3 flex items-center justify-between">
      <div className={["text-sm font-semibold", muted ? "text-black/55" : "text-black/70"].join(" ")}>
        {label}
      </div>
      <div className={["text-sm font-extrabold", muted ? "text-black/45" : "text-black/80"].join(" ")}>
        {value}
      </div>
    </div>
  );
}

export function KV({ label, value }) {
  return (
    <div className="flex items-start justify-between gap-3 border-b border-black/10 py-2">
      <div className="text-sm font-semibold text-black/65">{label}</div>
      <div className="text-sm text-black/70 text-right max-w-[65%]">{value}</div>
    </div>
  );
}