import React from "react";
import { render, screen } from "@testing-library/react";

// Mock dynamic imports used inside RentalsPanel
jest.mock("next/dynamic", () => (loader: any) => {
  const Comp = () => null;
  Comp.displayName = "DynamicMock";
  return Comp;
});

// Mock fetch globally
global.fetch = jest.fn().mockResolvedValue({
  ok: true,
  json: async () => ({ rentals: [] }),
});

// Mock lucide-react icons
jest.mock("lucide-react", () => ({
  Car: () => <span data-testid="icon-car" />,
  Plus: () => <span data-testid="icon-plus" />,
  Settings: () => <span data-testid="icon-settings" />,
  Loader2: () => <span data-testid="icon-loader" />,
  Calendar: () => <span data-testid="icon-calendar" />,
  AlertTriangle: () => <span data-testid="icon-alert" />,
  TrendingUp: () => <span data-testid="icon-trending" />,
}));

import RentalsPanel from "@/app/[lang]/dashboard/components/RentalsPanel";

describe("RentalsPanel", () => {
  beforeEach(() => {
    (global.fetch as jest.Mock).mockResolvedValue({
      ok: true,
      json: async () => ({ rentals: [] }),
    });
  });

  it("renders without crashing", () => {
    render(<RentalsPanel lang="en" />);
    expect(screen.getAllByText(/Active/i).length).toBeGreaterThan(0);
  });

  it("shows New Rental button", () => {
    render(<RentalsPanel lang="en" />);
    expect(screen.getByText(/New Rental/i)).toBeInTheDocument();
  });

  it("shows Manage Fleet button", () => {
    render(<RentalsPanel lang="en" />);
    expect(screen.getByText(/Manage Fleet/i)).toBeInTheDocument();
  });
});