import React from 'react';
import { render, screen } from '@testing-library/react';
import { StatusBadge, SensorStatusBadge } from '../StatusBadge';

describe('StatusBadge', () => {
  it('renders children text', () => {
    render(<StatusBadge>Active</StatusBadge>);
    expect(screen.getByText('Active')).toBeInTheDocument();
  });

  it('applies default variant styles', () => {
    render(<StatusBadge>Default</StatusBadge>);
    const badge = screen.getByText('Default');
    expect(badge).toHaveClass('bg-gray-100');
    expect(badge).toHaveClass('text-gray-700');
  });

  it('applies success variant styles', () => {
    render(<StatusBadge variant="success">Success</StatusBadge>);
    const badge = screen.getByText('Success');
    expect(badge).toHaveClass('bg-green-100');
    expect(badge).toHaveClass('text-green-700');
  });

  it('applies warning variant styles', () => {
    render(<StatusBadge variant="warning">Warning</StatusBadge>);
    const badge = screen.getByText('Warning');
    expect(badge).toHaveClass('bg-yellow-100');
    expect(badge).toHaveClass('text-yellow-700');
  });

  it('applies error variant styles', () => {
    render(<StatusBadge variant="error">Error</StatusBadge>);
    const badge = screen.getByText('Error');
    expect(badge).toHaveClass('bg-red-100');
    expect(badge).toHaveClass('text-red-700');
  });

  it('applies info variant styles', () => {
    render(<StatusBadge variant="info">Info</StatusBadge>);
    const badge = screen.getByText('Info');
    expect(badge).toHaveClass('bg-blue-100');
    expect(badge).toHaveClass('text-blue-700');
  });

  it('renders dot indicator when dot prop is true', () => {
    const { container } = render(<StatusBadge dot>With Dot</StatusBadge>);
    const dot = container.querySelector('.w-1\\.5.h-1\\.5.rounded-full');
    expect(dot).toBeInTheDocument();
  });

  it('does not render dot indicator by default', () => {
    const { container } = render(<StatusBadge>Without Dot</StatusBadge>);
    const dot = container.querySelector('.w-1\\.5.h-1\\.5.rounded-full');
    expect(dot).not.toBeInTheDocument();
  });

  it('applies custom className', () => {
    render(<StatusBadge className="custom-class">Custom</StatusBadge>);
    const badge = screen.getByText('Custom');
    expect(badge).toHaveClass('custom-class');
  });

  it('applies online variant styles', () => {
    render(<StatusBadge variant="online">Online</StatusBadge>);
    const badge = screen.getByText('Online');
    expect(badge).toHaveClass('bg-green-100');
    expect(badge).toHaveClass('text-green-700');
  });

  it('applies offline variant styles', () => {
    render(<StatusBadge variant="offline">Offline</StatusBadge>);
    const badge = screen.getByText('Offline');
    expect(badge).toHaveClass('bg-gray-100');
    expect(badge).toHaveClass('text-gray-500');
  });
});

describe('SensorStatusBadge', () => {
  it('renders Online text for online status', () => {
    render(<SensorStatusBadge status="online" />);
    expect(screen.getByText('Online')).toBeInTheDocument();
  });

  it('renders Offline text for offline status', () => {
    render(<SensorStatusBadge status="offline" />);
    expect(screen.getByText('Offline')).toBeInTheDocument();
  });

  it('renders Warning text for warning status', () => {
    render(<SensorStatusBadge status="warning" />);
    expect(screen.getByText('Warning')).toBeInTheDocument();
  });

  it('renders Error text for error status', () => {
    render(<SensorStatusBadge status="error" />);
    expect(screen.getByText('Error')).toBeInTheDocument();
  });

  it('includes dot indicator', () => {
    const { container } = render(<SensorStatusBadge status="online" />);
    const dot = container.querySelector('.w-1\\.5.h-1\\.5.rounded-full');
    expect(dot).toBeInTheDocument();
  });

  it('applies custom className', () => {
    render(<SensorStatusBadge status="online" className="custom-sensor-class" />);
    const badge = screen.getByText('Online');
    expect(badge).toHaveClass('custom-sensor-class');
  });
});