import React, { Suspense } from 'react';
import { render, cleanup } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';

import VerificationBadge from '.';

jest.mock('../../../../images/icons/verified-author', () => {
  const MockIcon = (props) => <svg data-testid="verify-icon" {...props} />;
  return { __esModule: true, default: MockIcon };
});

jest.mock('../../../../images/icons/country-flag', () => {
  const MockFlag = (props) => <svg data-testid="flag-icon" {...props} />;
  return { __esModule: true, default: MockFlag };
});

const renderWithSuspense = (ui) =>
  render(<Suspense fallback={<div>Loading...</div>}>{ui}</Suspense>);

describe('VerificationBadge Component', () => {
  afterEach(() => {
    cleanup();
  });

  test('renders with default props', () => {
    const { container } = renderWithSuspense(<VerificationBadge />);
    expect(container.querySelector('.badgeContainer')).toBeInTheDocument();
  });

  test('renders with custom icon', () => {
    const customIcon = <span data-testid="custom-icon">✓</span>;
    const { getByTestId } = renderWithSuspense(
      <VerificationBadge icon={customIcon} />
    );
    expect(getByTestId('custom-icon')).toBeInTheDocument();
  });

  test('renders with custom flag', () => {
    const customFlag = <span data-testid="custom-flag">🏳</span>;
    const { getByTestId } = renderWithSuspense(
      <VerificationBadge flag={customFlag} />
    );
    expect(getByTestId('custom-flag')).toBeInTheDocument();
  });

  test('applies extraClass', async () => {
    const { container, findByTestId } = renderWithSuspense(
      <VerificationBadge extraClass="my-class" />
    );
    await findByTestId('flag-icon');
    expect(container.querySelector('.badgeContainer')).toHaveClass('my-class');
  });
});
