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

import VerificationBadge from '.';
import '@testing-library/jest-dom/extend-expect';

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

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

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

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

  test('renders default translated text', async () => {
    const { findByText } = renderWithSuspense(<VerificationBadge />);
    const element = await findByText(/Verified on/);
    expect(element).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('applies extraClass', async () => {
    const { container, findByText } = renderWithSuspense(
      <VerificationBadge extraClass="my-class" />
    );
    await findByText(/Verified on/);
    expect(container.querySelector('.badgeContainer')).toHaveClass('my-class');
  });
});
