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

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

  it('renders as a badge', () => {
    render(<UnfinishedBadge />);
    const badge = screen.getByText('WIP').closest('span');
    expect(badge).toBeInTheDocument();
  });

  it('uses warning variant', () => {
    render(<UnfinishedBadge />);
    const badge = screen.getByText('WIP').closest('span');
    expect(badge).toHaveClass('bg-amber-100');
  });

  it('uses pill style', () => {
    render(<UnfinishedBadge />);
    const badge = screen.getByText('WIP').closest('span');
    expect(badge).toHaveClass('rounded-full');
  });

  it('uses small size', () => {
    render(<UnfinishedBadge />);
    const badge = screen.getByText('WIP').closest('span');
    expect(badge).toHaveClass('text-xs');
  });
});