import { render, screen } from '@testing-library/react';
import { describe, it, expect, vi, beforeEach } from 'vitest';
import { OptimizedImage } from './optimized-image';

vi.mock('@/hooks/useIntersectionObserver', () => ({
  useIntersectionObserver: () => ({ isIntersecting: true }),
}));

vi.mock('@/components/ui/optimized-image/useImageFormatSupport', () => ({
  useImageFormatSupport: () => ['jpeg'],
}));

describe('OptimizedImage Component', () => {
  beforeEach(() => {
    vi.clearAllMocks();
  });

  it('renders loading placeholder when src is provided', () => {
    const { container } = render(<OptimizedImage src="test.jpg" alt="Test image" />);
    const wrapper = container.querySelector('.relative');
    expect(wrapper).toBeInTheDocument();
  });

  it('renders custom placeholder while loading', () => {
    render(
      <OptimizedImage
        src="test.jpg"
        alt="Test"
        placeholder={<div>Loading...</div>}
      />,
    );
    expect(screen.getByText('Loading...')).toBeInTheDocument();
  });

  it('accepts fallback prop and renders', () => {
    render(
      <OptimizedImage
        src="test.jpg"
        alt="Test"
        fallback={<div data-testid="custom-fallback">Image not available</div>}
      />,
    );
    expect(document.querySelector('.relative')).toBeInTheDocument();
  });

  it('applies custom className to wrapper', () => {
    const { container } = render(
      <OptimizedImage src="test.jpg" alt="Test" className="custom-class" />,
    );
    const wrapper = container.querySelector('.custom-class');
    expect(wrapper).toBeInTheDocument();
  });

  it('applies width and height to wrapper', () => {
    const { container } = render(
      <OptimizedImage src="test.jpg" alt="Test" width={200} height={200} />,
    );
    const wrapper = container.querySelector('.relative');
    const style = wrapper?.getAttribute('style') ?? '';
    expect(style).toContain('width: 200px');
    expect(style).toContain('height: 200px');
  });
});