import { Activity } from "lucide-react";

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

import { DashboardCard } from "@/components/dashboard/dashboard-card";
import { StatsCard } from "@/components/dashboard/stats-card";

describe("StatsCard", () => {
  it("renders the title and value", () => {
    render(<StatsCard title="Visitors" value="1,234" icon={Activity} />);
    expect(screen.getByText("Visitors")).toBeInTheDocument();
    expect(screen.getByText("1,234")).toBeInTheDocument();
  });

  it("renders an optional description and footer", () => {
    render(
      <StatsCard title="T" value="V" description="Up 5%" footer={<span>footer</span>} />,
    );
    expect(screen.getByText("Up 5%")).toBeInTheDocument();
    expect(screen.getByText("footer")).toBeInTheDocument();
  });

  it("omits the icon container when no icon is provided", () => {
    const { container } = render(<StatsCard title="T" value="V" />);
    expect(container.querySelector("svg")).toBeNull();
  });
});

describe("DashboardCard", () => {
  it("passes its props through to a StatsCard", () => {
    render(<DashboardCard title="Sales" value="42" description="today" icon={Activity} />);
    expect(screen.getByText("Sales")).toBeInTheDocument();
    expect(screen.getByText("42")).toBeInTheDocument();
    expect(screen.getByText("today")).toBeInTheDocument();
  });
});