import { render, screen } from "@testing-library/react";
import { describe, expect, it } from "vitest";
import { EmptyState } from "./empty-state";

describe("empty-state", () => {
  it("renders the default title and message", () => {
    render(<EmptyState />);
    expect(screen.getByRole("heading", { name: "No data" })).toBeInTheDocument();
    expect(screen.getByText("There are no items to display.")).toBeInTheDocument();
  });

  it("renders a custom title and message", () => {
    render(<EmptyState title="No products" message="Create your first product." />);
    expect(screen.getByRole("heading", { name: "No products" })).toBeInTheDocument();
    expect(screen.getByText("Create your first product.")).toBeInTheDocument();
  });

  it("renders the action when provided", () => {
    render(<EmptyState action={<button type="button">Create</button>} />);
    expect(screen.getByRole("button", { name: "Create" })).toBeInTheDocument();
  });

  it("omits the icon container when no icon is provided", () => {
    render(<EmptyState icon={<svg data-testid="icon" />} />);
    expect(screen.getByTestId("icon")).toBeInTheDocument();
  });
});