import { render, screen, fireEvent } from '@testing-library/react';
import { describe, it, expect, vi } from 'vitest';
import { Switch } from './switch';
import React from 'react';

describe('Switch', () => {
  it('renders correctly', () => {
    render(<Switch id="test-switch" />);
    const switchElement = screen.getByRole('switch');
    expect(switchElement).toBeInTheDocument();
  });

  it('toggles state on click', () => {
    const onCheckedChange = vi.fn();
    render(<Switch onCheckedChange={onCheckedChange} />);
    const switchElement = screen.getByRole('switch');

    fireEvent.click(switchElement);
    expect(onCheckedChange).toHaveBeenCalledWith(true);
  });

  it('is disabled when disabled prop is true', () => {
    render(<Switch disabled />);
    const switchEl = screen.getByRole('switch');
    expect(switchEl).toBeDisabled();
  });

  it('renders correctly with different sizes', () => {
    const { rerender } = render(<Switch size="sm" />);
    expect(screen.getByRole('switch')).toHaveClass('h-3.5', 'w-7');

    rerender(<Switch size="md" />);
    expect(screen.getByRole('switch')).toHaveClass('h-[1.15rem]', 'w-8');

    rerender(<Switch size="lg" />);
    expect(screen.getByRole('switch')).toHaveClass('h-[1.375rem]', 'w-10');
  });

  it('reflects checked state', () => {
    render(<Switch checked={true} onCheckedChange={() => {}} />);
    const switchElement = screen.getByRole('switch');
    expect(switchElement).toHaveAttribute('data-state', 'checked');
  });
});