import { render, screen, fireEvent } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from './collapsible';
import React from 'react';

describe('Collapsible', () => {
  it('renders correctly', () => {
    render(
      <Collapsible>
        <CollapsibleTrigger>Toggle</CollapsibleTrigger>
        <CollapsibleContent>Content</CollapsibleContent>
      </Collapsible>
    );

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

  it('toggles content visibility', () => {
    render(
      <Collapsible>
        <CollapsibleTrigger>Toggle</CollapsibleTrigger>
        <CollapsibleContent>Content</CollapsibleContent>
      </Collapsible>
    );

    const trigger = screen.getByText('Toggle');

    // Check initial state
    expect(trigger).toHaveAttribute('data-state', 'closed');

    fireEvent.click(trigger);
    expect(trigger).toHaveAttribute('data-state', 'open');
    expect(screen.getByText('Content')).toBeInTheDocument();

    fireEvent.click(trigger);
    expect(trigger).toHaveAttribute('data-state', 'closed');
  });

  it('has correct data-slot attributes', () => {
    const { container } = render(
      <Collapsible open>
        <CollapsibleTrigger>Trigger</CollapsibleTrigger>
        <CollapsibleContent>Content</CollapsibleContent>
      </Collapsible>
    );

    expect(container.querySelector('[data-slot="collapsible"]')).toBeInTheDocument();
    expect(container.querySelector('[data-slot="collapsible-trigger"]')).toBeInTheDocument();
    expect(container.querySelector('[data-slot="collapsible-content"]')).toBeInTheDocument();
  });
});