/** @vitest-environment jsdom */
import { render, screen, fireEvent } from '@testing-library/react';
import { describe, it, expect, beforeEach } from 'vitest';
import { ThemeToggle } from './ThemeToggle';
import React from 'react';

describe('ThemeToggle', () => {
  beforeEach(() => {
    document.documentElement.classList.remove('dark');
  });

  it('toggles theme when clicked', () => {
    render(<ThemeToggle />);
    const button = screen.getByRole('button');

    // Initial: light (no dark class)
    expect(document.documentElement.classList.contains('dark')).toBe(false);

    // Click to dark
    fireEvent.click(button);
    expect(document.documentElement.classList.contains('dark')).toBe(true);

    // Click back to light
    fireEvent.click(button);
    expect(document.documentElement.classList.contains('dark')).toBe(false);
  });

  it('detects initial dark theme', () => {
    document.documentElement.classList.add('dark');
    render(<ThemeToggle />);
    // Check aria-label or specific icon
    expect(screen.getByLabelText('Mudar para tema claro')).toBeInTheDocument();
  });
});