import React from "react";
import { render } from "@testing-library/react";
import ProductDetailsAccordion from "@/components/productpage/ProductDetailsAccordion";
import { expect, test, vi } from "vitest";

// Mock Accordion components
vi.mock("@/components/ui/accordion", () => ({
  Accordion: ({ children }: any) => <div>{children}</div>,
  AccordionItem: ({ children, value }: any) => <div data-testid={`item-${value}`}>{children}</div>,
  AccordionTrigger: ({ children }: any) => <button>{children}</button>,
  AccordionContent: ({ children }: any) => <div>{children}</div>,
}));

// Mock Separator component
vi.mock("@/components/ui/separator", () => ({
  Separator: () => <hr />,
}));

test("ProductDetailsAccordion sanitizes malicious HTML", () => {
  const maliciousHtml = '<img src=x onerror="alert(\'XSS\')">';
  const { container } = render(
    <ProductDetailsAccordion
      description={maliciousHtml}
      manufacturerInfo="Info"
      structuredData={[]}
    />
  );

  // The malicious onerror attribute should be stripped out
  expect(container.innerHTML).not.toContain("onerror");
  expect(container.innerHTML).not.toContain("alert('XSS')");
  // But the img tag might still be there (sanitized)
  expect(container.innerHTML).toContain("<img src=\"x\">");
});

test("ProductDetailsAccordion preserves safe HTML", () => {
  const safeHtml = "<b>Strong</b> <i>Italic</i>";
  const { container } = render(
    <ProductDetailsAccordion
      description={safeHtml}
      manufacturerInfo="Info"
      structuredData={[]}
    />
  );

  expect(container.innerHTML).toContain("<b>Strong</b>");
  expect(container.innerHTML).toContain("<i>Italic</i>");
});