import { render, screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import { NotificationBadge } from './notification-badge';
import React from 'react';

describe('NotificationBadge', () => {
  it('renders correctly with count', () => {
    render(
      <NotificationBadge count={5}>
        <div data-testid="target">Target</div>
      </NotificationBadge>
    );

    expect(screen.getByText('Target')).toBeInTheDocument();
    expect(screen.getByText('5')).toBeInTheDocument();
  });

  it('handles max count overflow', () => {
    render(
      <NotificationBadge count={100} max={99}>
        <div>Target</div>
      </NotificationBadge>
    );

    expect(screen.getByText('99+')).toBeInTheDocument();
  });

  it('renders dot variant correctly', () => {
    const { container } = render(
      <NotificationBadge dot>
        <div>Target</div>
      </NotificationBadge>
    );

    const badge = container.querySelector('span.h-2.w-2');
    expect(badge).toBeInTheDocument();
    expect(screen.queryByText('0')).not.toBeInTheDocument();
  });

  it('does not render when count is 0 and showZero is false', () => {
    render(
      <NotificationBadge count={0} showZero={false}>
        <div>Target</div>
      </NotificationBadge>
    );

    const badge = screen.queryByRole('status'); // Not a real role but testing query
    // Actually we check if the span exists
    expect(screen.queryByText('0')).not.toBeInTheDocument();
  });

  it('renders when count is 0 and showZero is true', () => {
    render(
      <NotificationBadge count={0} showZero={true}>
        <div>Target</div>
      </NotificationBadge>
    );

    expect(screen.getByText('0')).toBeInTheDocument();
  });
});