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?.className).toContain('bg-success/20');
    expect(badge?.className).toContain('text-success');
  });

  it('should have correct styling for not verified badge', () => {
    const { container } = render(<EmailVerificationBadge verified={false} />);
    const badge = container.querySelector('span');

    expect(badge?.className).toContain('bg-warning/20');
    expect(badge?.className).toContain('text-warning');
  });
});