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"');
});