import React from "react";
import { renderToString } from "react-dom/server";
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 on SSR", () => {
  const maliciousHtml = '<img src=x onerror="alert(\'XSS\')">';
  const ssrOutput = renderToString(
    <ProductDetailsAccordion
      description={maliciousHtml}
      manufacturerInfo="Info"
      structuredData={[]}
    />
  );

  // In SSR, it should now be sanitized
  expect(ssrOutput).not.toContain("onerror");
  expect(ssrOutput).not.toContain("alert('XSS')");
  // Check if img tag is present in sanitized form
  expect(ssrOutput).toContain('<img src="x">');
});