import SpeedCardBg, { SpeedCardBg as namedExport } from "./speed-card-bg";

describe("SpeedCardBg", () => {
  it("returns a valid SVG string", () => {
    const svg = SpeedCardBg();
    expect(svg).toContain("<svg");
    expect(svg).toContain("</svg>");
    expect(svg).toContain('xmlns="http://www.w3.org/2000/svg"');
  });

  it("uses default color #24A76A when no argument provided", () => {
    const svg = SpeedCardBg();
    expect(svg).toContain('fill="#24A76A"');
    expect(svg).not.toContain("${color}");
  });

  it("applies custom color to fill attributes", () => {
    const svg = SpeedCardBg("#FF0000");
    expect(svg).toContain('fill="#FF0000"');
    expect(svg).not.toContain('fill="#24A76A"');
  });

  it("has correct SVG dimensions", () => {
    const svg = SpeedCardBg();
    expect(svg).toContain('width="684"');
    expect(svg).toContain('height="107"');
    expect(svg).toContain('viewBox="0 0 684 107"');
  });

  it("contains two path elements for the pinwheel", () => {
    const svg = SpeedCardBg();
    const pathMatches = svg.match(/<path /g);
    expect(pathMatches).toHaveLength(2);
  });

  it("fills both paths with the provided color", () => {
    const color = "#ABCDEF";
    const svg = SpeedCardBg(color);
    const fillMatches = svg.match(new RegExp(`fill="${color}"`, "g"));
    expect(fillMatches).toHaveLength(2);
  });

  it("exports the same function as both default and named", () => {
    expect(namedExport).toBe(SpeedCardBg);
  });
});