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

const toHtml = (CallToAction as any).toHtml;

describe('CallToAction.toHtml basic export', () => {
  test('renders heading, description, and CTA buttons', () => {
    const { html } = toHtml({ heading: 'Hi', description: 'Sub', ctas: [{ text: 'Go', href: '#', variant: 'primary' }] }, '');
    expect(html).toContain('Hi');
    expect(html).toContain('Sub');
    expect(html).toContain('Go');
  });

  test('box-model style props (margin/padding/border/boxShadow/opacity) flow through to the section style=""', () => {
    const { html } = toHtml({
      heading: 'Hi',
      description: 'Sub',
      style: { marginBottom: '12px', paddingRight: '6px', border: '2px dashed #333', boxShadow: '0 4px 8px rgba(0,0,0,0.12)', opacity: '0.75' },
    }, '');
    expect(html).toContain('margin-bottom:12px');
    expect(html).toContain('padding-right:6px');
    expect(html).toContain('border:2px dashed #333');
    expect(html).toContain('box-shadow:0 4px 8px rgba(0,0,0,0.12)');
    expect(html).toContain('opacity:0.75');
  });
});

describe('CallToAction.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 = (CallToAction 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);
  });
});
