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

describe('EmptyState', () => {
  it('renders title', () => {
    render(<EmptyState title="No items found" />);
    expect(screen.getByText('No items found')).toBeInTheDocument();
  });

  it('renders description when provided', () => {
    render(<EmptyState title="No items" description="Try adding some items" />);
    expect(screen.getByText('Try adding some items')).toBeInTheDocument();
  });

  it('does not render description when not provided', () => {
    const { container } = render(<EmptyState title="No items" />);
    const descriptions = container.querySelectorAll('p');
    expect(descriptions.length).toBe(0);
  });

  it('renders default icon when not provided', () => {
    const { container } = render(<EmptyState title="No items" />);
    const svg = container.querySelector('svg');
    expect(svg).toBeInTheDocument();
  });

  it('renders custom icon when provided', () => {
    render(<EmptyState title="No items" icon={<span data-testid="custom-icon">📭</span>} />);
    expect(screen.getByTestId('custom-icon')).toBeInTheDocument();
  });

  it('renders action when provided', () => {
    render(<EmptyState title="No items" action={<button>Add item</button>} />);
    expect(screen.getByText('Add item')).toBeInTheDocument();
  });

  it('does not render action when not provided', () => {
    render(<EmptyState title="No items" />);
    expect(screen.queryByRole('button')).not.toBeInTheDocument();
  });

  it('applies center text alignment', () => {
    const { container } = render(<EmptyState title="No items" />);
    expect(container.firstChild).toHaveClass('text-center');
  });

  it('applies padding', () => {
    const { container } = render(<EmptyState title="No items" />);
    expect(container.firstChild).toHaveClass('py-12', 'px-4');
  });

  it('applies custom className', () => {
    const { container } = render(<EmptyState title="No items" className="custom-class" />);
    expect(container.firstChild).toHaveClass('custom-class');
  });

  it('renders title with proper styling', () => {
    render(<EmptyState title="No items" />);
    const title = screen.getByText('No items');
    expect(title).toHaveClass('text-lg', 'font-medium');
  });

  it('renders description with proper styling', () => {
    render(<EmptyState title="No items" description="Add some items" />);
    const description = screen.getByText('Add some items');
    expect(description).toHaveClass('text-sm', 'text-gray-500');
  });

  it('centers the icon', () => {
    const { container } = render(<EmptyState title="No items" />);
    const iconContainer = container.querySelector('.flex.justify-center');
    expect(iconContainer).toBeInTheDocument();
  });

  it('constrains description width', () => {
    render(<EmptyState title="No items" description="Long description text" />);
    const description = screen.getByText('Long description text');
    expect(description).toHaveClass('max-w-sm', 'mx-auto');
  });
});
