// src/components/UnitSystemToggle.test.tsx
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import { describe, it, expect, vi, beforeEach } from 'vitest';
import { UnitSystemToggle } from './UnitSystemToggle';

describe('UnitSystemToggle', () => {
  const mockOnToggle = vi.fn();

  beforeEach(() => {
    vi.clearAllMocks();
  });

  it('should render correctly for imperial system', () => {
    render(<UnitSystemToggle currentSystem="imperial" onToggle={mockOnToggle} />);

    const checkbox = screen.getByRole('checkbox');
    expect(checkbox).toBeChecked();

    // Check which label is visually prominent
    expect(screen.getByText('Imperial')).not.toHaveClass('text-gray-400');
    expect(screen.getByText('Metric')).toHaveClass('text-gray-400');
  });

  it('should render correctly for metric system', () => {
    render(<UnitSystemToggle currentSystem="metric" onToggle={mockOnToggle} />);

    const checkbox = screen.getByRole('checkbox');
    expect(checkbox).not.toBeChecked();

    // Check which label is visually prominent
    expect(screen.getByText('Metric')).not.toHaveClass('text-gray-400');
    expect(screen.getByText('Imperial')).toHaveClass('text-gray-400');
  });

  it('should call onToggle when the toggle is clicked', () => {
    render(<UnitSystemToggle currentSystem="metric" onToggle={mockOnToggle} />);
    fireEvent.click(screen.getByRole('checkbox'));
    expect(mockOnToggle).toHaveBeenCalledTimes(1);
  });
});