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

describe('TypingIndicator', () => {
  it('renders when isTyping is true', () => {
    render(<TypingIndicator isTyping={true} />);
    expect(screen.getByText(/teacher is typing/i)).toBeInTheDocument();
  });

  it('does not render when isTyping is false', () => {
    const { container } = render(<TypingIndicator isTyping={false} />);
    expect(container.firstChild).toBe(null);
  });

  it('has animated dots', () => {
    const { container } = render(<TypingIndicator isTyping={true} />);
    const dots = container.querySelectorAll('.animate-pulse');
    expect(dots.length).toBeGreaterThan(0);
  });

  it('uses correct styling for Morning Mist theme', () => {
    const { container } = render(<TypingIndicator isTyping={true} />);
    expect(container.querySelector('.text-slate-500')).toBeInTheDocument();
  });
});
