import React from "react";
import { render, screen } from "@testing-library/react";
import { describe, it, expect, vi } from "vitest";
import { CartDetails } from "@/components/cart/CartDetails";
import { useCartStore } from "@/hooks/useCartStore";
import { TooltipProvider } from "@/components/ui/tooltip";

// Mock the cart store
vi.mock("@/hooks/useCartStore", () => ({
  useCartStore: vi.fn(),
}));

// Mock next/navigation
vi.mock("next/navigation", () => ({
  useRouter: () => ({
    push: vi.fn(),
  }),
}));

// Mock lucide-react to check for ArrowRight
vi.mock("lucide-react", async () => {
  const actual = await vi.importActual("lucide-react");
  return {
    ...actual,
    ArrowRight: () => <div data-testid="arrow-right-icon" />,
  };
});

describe("CartDetails", () => {
  const mockItems = [
    {
      id: "1",
      name: "Test Produkt",
      price: 10,
      quantity: 1,
      image: "/test.jpg",
    },
  ];

  it("renders checkout button as a Link with an icon", () => {
    (useCartStore as any).mockImplementation((selector: any) => {
      const state = {
        items: mockItems,
        clearCart: vi.fn(),
        addToCart: vi.fn(),
      };
      return selector ? selector(state) : state;
    });

    render(
      <TooltipProvider>
        <CartDetails />
      </TooltipProvider>
    );

    // Check for "Zur Kasse" link
    const checkoutLink = screen.getByRole("link", { name: /Zur Kasse/i });
    expect(checkoutLink).toBeDefined();
    expect(checkoutLink.getAttribute("href")).toBe("/order/checkout");

    // Check for the icon
    expect(screen.getByTestId("arrow-right-icon")).toBeDefined();
  });
});