// @ts-nocheck
import { describe, it, expect, jest } from '@jest/globals';
import { render } from '@testing-library/react';
import '@testing-library/jest-dom';

// Mock sonner Toaster
jest.mock('sonner', () => ({
  Toaster: ({ theme, className, ...props }: any) => (
    <div data-testid="sonner-toaster" data-theme={theme} className={className} {...props} />
  ),
  toast: {
    success: jest.fn(),
    error: jest.fn(),
    info: jest.fn(),
  },
}));

// Mock lucide-react icons used by Toaster
jest.mock('lucide-react', () => ({
  CheckCircle2: (props: any) => <svg data-testid="icon-check-circle" {...props} />,
  AlertCircle: (props: any) => <svg data-testid="icon-alert-circle" {...props} />,
  Info: (props: any) => <svg data-testid="icon-info" {...props} />,
  X: (props: any) => <svg data-testid="icon-x" {...props} />,
}));

describe('Toaster', () => {
  it('renders with correct className "toaster group"', () => {
    const { Toaster } = require('./sonner');
    const { container } = render(<Toaster />);
    const toaster = container.querySelector('[data-testid="sonner-toaster"]');
    expect(toaster).toBeInTheDocument();
    expect(toaster).toHaveClass('toaster group');
  });

  it('passes theme="light" to sonner', () => {
    const { Toaster } = require('./sonner');
    const { container } = render(<Toaster />);
    const toaster = container.querySelector('[data-testid="sonner-toaster"]');
    expect(toaster).toHaveAttribute('data-theme', 'light');
  });
});