import React from "react";
import { renderToStaticMarkup } from "react-dom/server";
import { describe, expect, it, vi } from "vitest";
import { WidgetContainer } from "./WidgetContainer.js";

vi.mock("framer-motion", () => ({
  motion: {
    div: ({ children, className }: { children: React.ReactNode; className?: string }) => (
      <div className={className}>{children}</div>
    ),
  },
}));

describe("WidgetContainer", () => {
  it("hides the description while details are off", () => {
    const html = renderToStaticMarkup(
      <WidgetContainer title="Utilization" description="Context text" onRemove={() => {}}>
        <div>Body</div>
      </WidgetContainer>,
    );

    expect(html).not.toContain("Context text");
  });

  it("shows the description while details are on", () => {
    const html = renderToStaticMarkup(
      <WidgetContainer
        title="Utilization"
        description="Context text"
        onRemove={() => {}}
        showDetails
      >
        <div>Body</div>
      </WidgetContainer>,
    );

    expect(html).toContain("Context text");
  });
});
