import { render, screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import { Empty, EmptyIcon, EmptyTitle, EmptyDescription, EmptyAction } from './empty';
import React from 'react';

describe('Empty', () => {
  it('renders correctly with all sub-components', () => {
    render(
      <Empty>
        <EmptyIcon>
          <span data-testid="icon">Icon</span>
        </EmptyIcon>
        <EmptyTitle>No data found</EmptyTitle>
        <EmptyDescription>Try adjusting your search filters.</EmptyDescription>
        <EmptyAction>
          <button>Add New</button>
        </EmptyAction>
      </Empty>
    );

    expect(screen.getByTestId('icon')).toBeInTheDocument();
    expect(screen.getByText('No data found')).toBeInTheDocument();
    expect(screen.getByText('Try adjusting your search filters.')).toBeInTheDocument();
    expect(screen.getByRole('button', { name: /add new/i })).toBeInTheDocument();
  });

  it('applies custom classNames', () => {
    const { container } = render(<Empty className="custom-empty" />);
    expect(container.firstChild).toHaveClass('custom-empty');
  });
});