import { readFileSync } from 'node:fs';
import { createElement } from 'react';
import { renderToStaticMarkup } from 'react-dom/server';
import { describe, expect, it } from 'vitest';
import { TriangleIcon } from '../../src/components/TriangleIcon';

describe('TriangleIcon', () => {
  it('rendert jede Funktionsrichtung mit derselben SVG-Geometrie', () => {
    const directions = ['left', 'right', 'up', 'down'] as const;
    const markup = directions.map(direction => renderToStaticMarkup(createElement(TriangleIcon, { direction })));

    markup.forEach((icon, index) => {
      expect(icon).toContain(`triangle-icon-${directions[index]}`);
      expect(icon).toContain('d="M9.5 1.5 2.5 6l7 4.5z"');
    });
  });

  it('behaelt die Dreiecksmarkierung bei neutralen, aktiven und Hover-Selectfarben', () => {
    const functional = readFileSync(new URL('../../src/styles/functional-icons.css', import.meta.url), 'utf8');
    const dynamic = readFileSync(new URL('../../src/styles/dynamic-filters.css', import.meta.url), 'utf8');
    const base = readFileSync(new URL('../../src/styles/base.css', import.meta.url), 'utf8');

    expect(functional).toContain('select:not([multiple])');
    expect(functional).toContain('background-image: url("data:image/svg+xml');
    expect(dynamic).not.toContain('background: var(--surface-input)');
    expect(dynamic).toContain('background-color: var(--surface-input)');
    expect(base).toContain('.select:hover, .input:hover { border-color: var(--line-strong); background-color: var(--panel-hover); }');
  });
});