import { parseIntroBlocks, splitLead } from "./introFormat";

/**
 * Renders the body of a gate widget: paragraphs plus real bullet lists with a
 * hanging indent, and the leading term of each bullet emphasised. Fills the
 * card width (no narrow measure cap) so the text runs close to the border.
 */
export function IntroBody({ text }: { text: string }) {
  const blocks = parseIntroBlocks(text);
  return (
    <div className="space-y-2.5 text-sm leading-relaxed text-muted-foreground">
      {blocks.map((b, i) =>
        b.kind === "para" ? (
          <p key={i}>{b.text}</p>
        ) : (
          <ul
            key={i}
            className="list-disc space-y-1.5 pl-5 marker:text-muted-foreground/50"
          >
            {b.items.map((item, j) => {
              const lead = splitLead(item);
              return (
                <li key={j} className="pl-1">
                  {lead ? (
                    <>
                      <strong className="font-semibold text-foreground">
                        {lead.lead}
                      </strong>
                      {lead.rest}
                    </>
                  ) : (
                    item
                  )}
                </li>
              );
            })}
          </ul>
        )
      )}
    </div>
  );
}