import type { ReactNode } from "react";

type SliderHeaderProps = {
  index: number;
  title: ReactNode;
  totalSteps?: number;
  stepLabel?: string;
};

export function SliderHeader({
  index,
  title,
  totalSteps = 5,
  stepLabel,
}: SliderHeaderProps) {
  return (
    <div className="text-center">
      <p className="text-[#747474] group-10 font-semibold">
        {stepLabel || `Step ${index + 1} of ${totalSteps}`}
      </p>
      <p className="text-[#111111] group-16 font-bold">{title}</p>
    </div>
  );
}

export default SliderHeader;