import { Check, Minus } from "lucide-react";

/**
 * Shared shape + renderer for the reporting help tooltips (cost figures and
 * scenario filters alike): a one-line summary, optional scannable
 * Includes/Excludes lists, and an optional footnote — so every ⓘ across the
 * reporting view reads the same way.
 */
export interface TipSpec {
  summary: string;
  includes?: string[];
  excludes?: string[];
  note?: string;
}

function Bullets({ items, kind }: { items: string[]; kind: "in" | "out" }) {
  const Icon = kind === "in" ? Check : Minus;
  return (
    <div>
      <div className="text-[0.64rem] font-bold uppercase tracking-wide text-gray-400">
        {kind === "in" ? "Includes" : "Excludes"}
      </div>
      <ul className="mt-1 space-y-1">
        {items.map((it) => (
          <li key={it} className="flex items-start gap-1.5">
            <Icon
              className={`mt-[3px] h-3 w-3 flex-none ${
                kind === "in" ? "text-[#0c6b4a]" : "text-gray-400"
              }`}
            />
            <span>{it}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

export function TipBody({ spec }: { spec: TipSpec }) {
  return (
    <div className="space-y-2.5">
      <p className="font-medium text-gray-800">{spec.summary}</p>
      {spec.includes && <Bullets items={spec.includes} kind="in" />}
      {spec.excludes && <Bullets items={spec.excludes} kind="out" />}
      {spec.note && (
        <p className="border-t border-gray-100 pt-2 text-gray-500">
          {spec.note}
        </p>
      )}
    </div>
  );
}
