import { render, fireEvent } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import { FaqAccordion } from '../FaqAccordion';

const items = [
  { question: 'Can I switch plans?', answer: 'Yes, anytime.' },
  { question: 'Is there a free trial?', answer: 'Yes, 14 days.' },
];

describe('FaqAccordion', () => {
  it('renders all questions', () => {
    const { getByText } = render(<FaqAccordion items={items} />);
    expect(getByText('Can I switch plans?')).toBeTruthy();
    expect(getByText('Is there a free trial?')).toBeTruthy();
  });

  it('shows answer in DOM after opening', () => {
    const { getByText, queryByText } = render(<FaqAccordion items={items} />);
    // Answer hidden (not in DOM) when closed
    expect(queryByText('Yes, anytime.')).toBeNull();
    // Open the item
    fireEvent.click(getByText('Can I switch plans?').closest('button')!);
    expect(queryByText('Yes, anytime.')).toBeTruthy();
  });

  it('toggles item open on click', () => {
    const { getByText } = render(<FaqAccordion items={items} />);
    const btn = getByText('Can I switch plans?').closest('button')!;
    fireEvent.click(btn);
    expect(btn.getAttribute('aria-expanded')).toBe('true');
  });

  it('closes open item when clicked again', () => {
    const { getByText } = render(<FaqAccordion items={items} />);
    const btn = getByText('Can I switch plans?').closest('button')!;
    fireEvent.click(btn);
    fireEvent.click(btn);
    expect(btn.getAttribute('aria-expanded')).toBe('false');
  });
});
