import { describe, it, expect } from 'vitest';
import { render, screen } from '@/test/helpers';
import { EmailVerificationBadge } from './EmailVerificationBadge';

describe('EmailVerificationBadge', () => {
  it('should display verified badge when email is verified', () => {
    render(<EmailVerificationBadge verified={true} />);
    
    expect(screen.getByText(/email verified/i)).toBeInTheDocument();
    expect(screen.getByText(/✓/i)).toBeInTheDocument();
  });

  it('should display not verified badge when email is not verified', () => {
    render(<EmailVerificationBadge verified={false} />);
    
    expect(screen.getByText(/email not verified/i)).toBeInTheDocument();
    expect(screen.getByText(/⚠/i)).toBeInTheDocument();
  });

  it('should have correct styling for verified badge', () => {
    const { container } = render(<EmailVerificationBadge verified={true} />);
    const badge = container.querySelector('span');
    
    expect(badge).toHaveClass('bg-green-100', 'text-green-800');
  });

  it('should have correct styling for not verified badge', () => {
    const { container } = render(<EmailVerificationBadge verified={false} />);
    const badge = container.querySelector('span');
    
    expect(badge).toHaveClass('bg-yellow-100', 'text-yellow-800');
  });
});