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

describe("SummaryCards", () => {
  it("renders red downward trend chips for declining metrics", () => {
    const { container } = render(
      <SummaryCards
        currency="SAR"
        cards={{
          trips_today: { value: 8, avg_per_vehicle: 4 },
          revenue_today: {
            value: 200,
            your_share: 40,
            change: { formatted: "-5%", label: "من الأمس", trend: "down" },
          },
          vehicles: {
            total: 2,
            active: 2,
            maintenance: 0,
            in_ride: 0,
            inactive: 0,
          },
          total_profits: {
            value: 1000,
            change: { formatted: "-2%", label: "هذا الشهر", trend: "down" },
          },
        }}
      />,
    );

    expect(screen.getByText("-2% هذا الشهر")).toHaveClass("text-red-400");
    expect(screen.getByText("-5% من الأمس")).toHaveClass("text-red-400");
    expect(container.querySelectorAll(".ri-arrow-down-line")).toHaveLength(2);
  });
});