import { render } from '@testing-library/vue';
import { describe, expect, test } from 'vitest';
import { MockIcon } from '@/__tests__/test-utils';
import UiEmpty from '../UiEmpty.vue';

describe('UiEmpty', () => {
  test('renders with default icon when no icon prop provided', () => {
    const { container } = render(UiEmpty);
    // Should render with the default inbox icon (aria-hidden for decorative purposes)
    const icon = container.querySelector('svg.lucide-inbox');
    expect(icon).toBeInTheDocument();
  });

  test('renders title when provided', () => {
    const { getByText } = render(UiEmpty, {
      props: { title: 'No items found' },
    });
    expect(getByText('No items found')).toBeInTheDocument();
  });

  test('renders description when provided', () => {
    const { getByText } = render(UiEmpty, {
      props: { description: 'There are no items to display.' },
    });
    expect(getByText('There are no items to display.')).toBeInTheDocument();
  });

  test('renders both title and description', () => {
    const { getByText } = render(UiEmpty, {
      props: {
        title: 'Empty State',
        description: 'Nothing here yet.',
      },
    });
    expect(getByText('Empty State')).toBeInTheDocument();
    expect(getByText('Nothing here yet.')).toBeInTheDocument();
  });

  test('renders custom icon when provided', () => {
    const { getByTestId } = render(UiEmpty, {
      props: { icon: MockIcon },
    });
    expect(getByTestId('mock-icon')).toBeInTheDocument();
  });

  test('renders slot content', () => {
    const { getByText } = render(UiEmpty, {
      props: { title: 'No data' },
      slots: { default: '<button>Add Item</button>' },
    });
    expect(getByText('Add Item')).toBeInTheDocument();
  });

  test('does not render title element when title is not provided', () => {
    const { queryByRole } = render(UiEmpty, {
      props: { description: 'Some description' },
    });
    expect(queryByRole('heading', { level: 3 })).not.toBeInTheDocument();
  });

  test('does not render description element when description is not provided', () => {
    const { getByText } = render(UiEmpty, {
      props: { title: 'Some title' },
    });
    expect(getByText('Some title')).toBeInTheDocument();
  });
});
