import { describe, it, expect } from "vitest";
import { Hono } from "hono";
import { Button } from "../button.js";

describe("Button", () => {
  it("renders as <button> when no href provided", async () => {
    const app = new Hono().get("/", (c) =>
      c.html(<Button variant="primary">Click</Button>)
    );
    const res = await app.request("/");
    const html = await res.text();
    expect(html).toContain("<button");
    expect(html).toContain("btn-primary");
    expect(html).toContain("Click");
  });

  it("renders as <a> when href provided", async () => {
    const app = new Hono().get("/", (c) =>
      c.html(<Button variant="secondary" href="/boards">Go</Button>)
    );
    const res = await app.request("/");
    const html = await res.text();
    expect(html).toContain("<a ");
    expect(html).toContain('href="/boards"');
    expect(html).toContain("btn-secondary");
  });

  it("renders danger variant", async () => {
    const app = new Hono().get("/", (c) =>
      c.html(<Button variant="danger">Delete</Button>)
    );
    const res = await app.request("/");
    const html = await res.text();
    expect(html).toContain("btn-danger");
  });

  it("includes base btn class on all variants", async () => {
    const app = new Hono().get("/", (c) =>
      c.html(<Button variant="primary">x</Button>)
    );
    const res = await app.request("/");
    const html = await res.text();
    expect(html).toMatch(/class="btn /);
  });
});