import type { ElementType, ReactNode } from 'react';

export type FunnelStepHeaderProps = {
  className?: string;
  kicker?: ReactNode;
  kickerAs?: ElementType;
  kickerClassName?: string;
  title: ReactNode;
  titleAs?: ElementType;
  titleClassName?: string;
  subtitle?: ReactNode;
  subtitleAs?: ElementType;
  subtitleClassName?: string;
};

export function FunnelStepHeader({
  className,
  kicker,
  kickerAs: KickerTag = 'p',
  kickerClassName,
  title,
  titleAs: TitleTag = 'h2',
  titleClassName,
  subtitle,
  subtitleAs: SubtitleTag = 'p',
  subtitleClassName,
}: FunnelStepHeaderProps) {
  return (
    <header className={className}>
      {kicker ? <KickerTag className={kickerClassName}>{kicker}</KickerTag> : null}
      <TitleTag className={titleClassName}>{title}</TitleTag>
      {subtitle ? <SubtitleTag className={subtitleClassName}>{subtitle}</SubtitleTag> : null}
    </header>
  );
}