import { describe, test, expect } from 'vitest';
import { Accordion } from './Accordion';

const toHtml = (Accordion as any).toHtml;

const items = [
  { title: 'Q1', content: 'A1', isOpen: true },
  { title: 'Q2', content: 'A2', isOpen: false },
];

describe('Accordion.toHtml basic export', () => {
  test('renders a <details> per item with the open attribute honored', () => {
    const { html } = toHtml({ items }, '');
    const detailsBlocks = html.match(/<details[^>]*>/g) || [];
    expect(detailsBlocks.length).toBe(2);
    expect(detailsBlocks[0]).toContain(' open');
    expect(detailsBlocks[1]).not.toContain(' open');
  });

  test('headerBg/headerColor/contentBg/borderColor emit into the panel styles', () => {
    const { html } = toHtml({ items, headerBg: '#111111', headerColor: '#222222', contentBg: '#333333', borderColor: '#444444' }, '');
    expect(html).toContain('#111111');
    expect(html).toContain('#222222');
    expect(html).toContain('#333333');
    expect(html).toContain('#444444');
  });
});

describe('Accordion.craft.props includes the box-model/animation/visibility rollout props', () => {
  test('animation, animationDelay, and all 3 hideOn* flags are declared (blank/false defaults)', () => {
    const props = (Accordion as any).craft.props;
    expect(props).toHaveProperty('animation', '');
    expect(props).toHaveProperty('animationDelay', '');
    expect(props).toHaveProperty('hideOnDesktop', false);
    expect(props).toHaveProperty('hideOnTablet', false);
    expect(props).toHaveProperty('hideOnMobile', false);
  });
});