import assert from "node:assert/strict";
import { test } from "node:test";

import { Tabs, TabsContent } from "@repo/shadcn-ui/components/tabs";
import { renderToStaticMarkup } from "react-dom/server";

import { ScrollableTabsList } from "./components/scrollable-tabs-list";

test("pestañas desplazables: conserva identidad, selección y etiquetas largas sin añadir focos al SSR", () => {
  const items = [
    { value: "all", label: "Todo" },
    { value: "first", label: "Plantilla con nombre largo repetido" },
    { value: "second", label: "Plantilla con nombre largo repetido" },
  ];

  for (const locale of ["es", "en"]) {
    const html = renderToStaticMarkup(
      <Tabs value="second">
        <ScrollableTabsList items={items} label="Familias" locale={locale} value="second" />
        <TabsContent value="second">Contenido seleccionado</TabsContent>
      </Tabs>
    );

    assert.equal((html.match(/role="tab"/g) ?? []).length, 3);
    assert.ok(html.includes('aria-label="Familias"'));
    assert.match(html, /<button[^>]*aria-selected="true"[^>]*data-value="second"/);
    assert.ok(html.includes("Contenido seleccionado"));
    assert.ok(html.includes('data-slot="scrollable-tabs-viewport"'));
    assert.equal(html.includes("Scroll tabs left"), false);
    assert.equal(html.includes("Desplazar pestañas a la izquierda"), false);
  }
});