import type { ReactNode } from 'react';
import './blocks.css';

export interface CTABlockProps {
  title: string;
  subtitle?: string;
  primaryCtaLabel?: string;
  primaryCtaLink?: string;
  onPrimaryCtaClick?: () => void;
  secondaryCtaLabel?: string;
  secondaryCtaLink?: string;
  onSecondaryCtaClick?: () => void;
  backgroundImage?: string;
  variant?: 'default' | 'centered' | 'split';
  children?: ReactNode;
}

export function CTABlock({ 
  title, 
  subtitle,
  primaryCtaLabel,
  primaryCtaLink,
  onPrimaryCtaClick,
  secondaryCtaLabel,
  secondaryCtaLink,
  onSecondaryCtaClick,
  backgroundImage,
  variant = 'default',
  children
}: CTABlockProps) {
  return (
    <section 
      className={`shared-cta shared-cta--${variant}`}
      style={backgroundImage ? { backgroundImage: `url(${backgroundImage})` } : undefined}
    >
      <div className="shared-cta__content">
        <h2 className="shared-cta__title">{title}</h2>
        {subtitle && <p className="shared-cta__subtitle">{subtitle}</p>}
        {children && <div className="shared-cta__children">{children}</div>}
        <div className="shared-cta__actions">
          {primaryCtaLabel && (
            primaryCtaLink ? (
              <a href={primaryCtaLink} className="shared-button shared-button--primary">
                {primaryCtaLabel}
              </a>
            ) : (
              <button 
                type="button" 
                className="shared-button shared-button--primary"
                onClick={onPrimaryCtaClick}
              >
                {primaryCtaLabel}
              </button>
            )
          )}
          {secondaryCtaLabel && (
            secondaryCtaLink ? (
              <a href={secondaryCtaLink} className="shared-button shared-button--secondary">
                {secondaryCtaLabel}
              </a>
            ) : (
              <button 
                type="button" 
                className="shared-button shared-button--secondary"
                onClick={onSecondaryCtaClick}
              >
                {secondaryCtaLabel}
              </button>
            )
          )}
        </div>
      </div>
    </section>
  );
}