import React from 'react';
import { render } from '@testing-library/react-native';
import {
  LoadingOverlay,
  InlineLoadingOverlay,
  LoadingCardOverlay,
} from '@/components/ui/LoadingOverlay';

describe('LoadingOverlay', () => {
  it('renders nothing when visible is false', () => {
    const { toJSON } = render(<LoadingOverlay visible={false} />);
    expect(toJSON()).toBeNull();
  });

  it('renders modal when visible is true', () => {
    const { getByText } = render(<LoadingOverlay visible={true} />);
    expect(getByText('Loading...')).toBeTruthy();
  });

  it('renders custom message', () => {
    const { getByText } = render(
      <LoadingOverlay visible={true} message="Saving..." />
    );
    expect(getByText('Saving...')).toBeTruthy();
  });
});

describe('InlineLoadingOverlay', () => {
  it('renders nothing when visible is false', () => {
    const { toJSON } = render(<InlineLoadingOverlay visible={false} />);
    expect(toJSON()).toBeNull();
  });

  it('renders overlay when visible is true', () => {
    const { toJSON } = render(<InlineLoadingOverlay visible={true} />);
    expect(toJSON()).toBeTruthy();
  });

  it('renders with message', () => {
    const { getByText } = render(
      <InlineLoadingOverlay visible={true} message="Loading data..." />
    );
    expect(getByText('Loading data...')).toBeTruthy();
  });
});

describe('LoadingCardOverlay', () => {
  it('renders nothing when visible is false', () => {
    const { toJSON } = render(<LoadingCardOverlay visible={false} />);
    expect(toJSON()).toBeNull();
  });

  it('renders overlay when visible is true', () => {
    const { toJSON } = render(<LoadingCardOverlay visible={true} />);
    expect(toJSON()).toBeTruthy();
  });
});