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

export interface HeroBlockProps {
  eyebrow?: string;
  title: string;
  subtitle?: string;
  ctaLabel?: string;
  onCtaClick?: () => void;
  supportingContent?: ReactNode;
}

export function HeroBlock({ eyebrow, title, subtitle, ctaLabel, onCtaClick, supportingContent }: HeroBlockProps) {
  return (
    <section className="shared-hero">
      {eyebrow && <p className="shared-hero__eyebrow">{eyebrow}</p>}
      <h2 className="shared-hero__title">{title}</h2>
      {subtitle && <p className="shared-hero__subtitle">{subtitle}</p>}
      {supportingContent && <div className="shared-hero__support">{supportingContent}</div>}
      {ctaLabel && (
        <button type="button" className="shared-button" onClick={onCtaClick}>
          {ctaLabel}
        </button>
      )}
    </section>
  );
}


