import { render, screen, fireEvent } from '@testing-library/react';
import { describe, it, expect, vi } from 'vitest';
import { EmptyState } from './empty-state';
import { Music } from 'lucide-react';

describe('EmptyState Component', () => {
  it('renders empty state with title and description', () => {
    render(
      <EmptyState
        title="No tracks found"
        description="You haven't uploaded any tracks yet."
      />,
    );

    expect(screen.getByText('No tracks found')).toBeInTheDocument();
    expect(
      screen.getByText("You haven't uploaded any tracks yet."),
    ).toBeInTheDocument();
  });

  it('renders with icon', () => {
    render(
      <EmptyState
        title="Empty"
        description="No items"
        icon={<Music data-testid="music-icon" />}
      />,
    );

    expect(screen.getByTestId('music-icon')).toBeInTheDocument();
  });

  it('renders with action button', () => {
    const handleAction = vi.fn();
    render(
      <EmptyState
        title="Empty"
        description="No items"
        action={{
          label: 'Add Item',
          onClick: handleAction,
        }}
      />,
    );

    const button = screen.getByText('Add Item');
    expect(button).toBeInTheDocument();

    fireEvent.click(button);
    expect(handleAction).toHaveBeenCalledTimes(1);
  });

  it('does not render action button when action is not provided', () => {
    render(<EmptyState title="Empty" description="No items" />);

    const button = screen.queryByText('Add Item');
    expect(button).not.toBeInTheDocument();
  });

  it('applies custom className', () => {
    render(
      <EmptyState
        title="Empty"
        description="No items"
        className="custom-empty-state"
      />,
    );

    const emptyState = screen.getByText('Empty').closest('.custom-empty-state');
    expect(emptyState).toBeInTheDocument();
  });

  it('renders without description', () => {
    render(<EmptyState title="Empty" />);

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