import { render, screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import { Alert, AlertTitle, AlertDescription } from './alert';
import React from 'react';

describe('Alert', () => {
  it('renders correctly with default props', () => {
    render(
      <Alert>
        <AlertTitle>Heads up!</AlertTitle>
        <AlertDescription>You can add components to your app using the cli.</AlertDescription>
      </Alert>
    );

    expect(screen.getByRole('alert')).toBeInTheDocument();
    expect(screen.getByText('Heads up!')).toBeInTheDocument();
    expect(
      screen.getByText('You can add components to your app using the cli.')
    ).toBeInTheDocument();
  });

  it('renders correctly with different variants', () => {
    const { rerender } = render(<Alert variant="success">Success</Alert>);
    expect(screen.getByRole('alert')).toHaveClass('border-l-[color:var(--success)]');

    rerender(<Alert variant="destructive">Destructive</Alert>);
    expect(screen.getByRole('alert')).toHaveClass('border-l-[color:var(--destructive)]');
  });

  it('renders a custom icon', () => {
    render(<Alert icon={<span data-testid="custom-icon">Icon</span>}>Message</Alert>);
    expect(screen.getByTestId('custom-icon')).toBeInTheDocument();
  });

  it('hides icon when icon prop is null', () => {
    const { container } = render(<Alert icon={null}>No icon</Alert>);
    // The default icon shouldn't be there
    expect(container.querySelector('svg')).not.toBeInTheDocument();
  });

  it('has correct data-slot attributes', () => {
    const { container } = render(
      <Alert>
        <AlertTitle>Title</AlertTitle>
        <AlertDescription>Description</AlertDescription>
      </Alert>
    );

    expect(container.querySelector('[data-slot="alert"]')).toBeInTheDocument();
    expect(container.querySelector('[data-slot="alert-title"]')).toBeInTheDocument();
    expect(container.querySelector('[data-slot="alert-description"]')).toBeInTheDocument();
  });
});