import { expect, test } from "bun:test"

type ScreenshotMatcher = {
  toMatchScreenshot: (name: string) => Promise<unknown> | unknown
}

function isScreenshotMatcher(value: unknown): value is ScreenshotMatcher {
  return typeof value === "object" && value !== null && "toMatchScreenshot" in value &&
    typeof (value as ScreenshotMatcher).toMatchScreenshot === "function"
}

const matcherProbe = expect({}) as unknown
const hasScreenshotMatcher = isScreenshotMatcher(matcherProbe)
const testFn = hasScreenshotMatcher ? test : test.skip

testFn("CTA button snapshot", async () => {
  const html = `
    <main
      style="
        font-family: 'Inter', sans-serif;
        padding: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #111827, #1f2937);
        min-height: 320px;
      "
    >
      <button
        data-testid="cta"
        style="
          font-size: 18px;
          padding: 14px 28px;
          border-radius: 9999px;
          border: none;
          color: white;
          background: #2563eb;
          box-shadow: 0 10px 20px rgba(37, 99, 235, 0.35);
          cursor: pointer;
        "
      >
        Abrir chamado
      </button>
    </main>
  `

  document.body.innerHTML = html

  const ctaButton = document.querySelector("[data-testid='cta']")
  expect(ctaButton).toBeTruthy()

  const bodyExpectation = expect(document.body) as unknown
  if (isScreenshotMatcher(bodyExpectation)) {
    await bodyExpectation.toMatchScreenshot("cta-button")
  }
})