import { expect, test } from "bun:test";
import { buttonBlock, ampLayoutCss } from "../src/blocks.ts";

test("button visuals target the clickable surface rather than the full-width wrapper", async () => {
  const node = {
    id: "cta",
    type: "content.button",
    version: 1,
    props: { label: "Act", href: "https://example.com" },
    styles: {
      backgroundColor: { base: "#123456" },
      padding: { base: "8px 32px" },
      borderRadius: { base: "20px" },
    },
    slots: {},
  };
  const context = { node, context: {}, slots: {} } as never;
  const html = String(await buttonBlock.renderers!.emailHtml!(context));
  const wrapper = html.match(/<td data-block-id="cta"[^>]*>/)![0];
  expect(wrapper).not.toContain("#123456");
  expect(wrapper).not.toContain("20px");
  expect(wrapper).not.toContain("32px");
  expect(html).toContain('bgcolor="#123456"');
  expect(html.match(/<a [^>]*>/)![0]).toContain("padding:8px 32px");
  expect(ampLayoutCss(node)).toContain("padding:8px 32px");
  expect(String(await buttonBlock.renderers!.mjml!(context))).toContain('inner-padding="8px 32px"');
});