import type { ReactNode } from "react";
import { SHOW_INTRO_VIDEOS } from "@/config/features";
import { useI18n } from "@/translations/provider";

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

export function SliderHeader({
  index,
  title,
  totalSteps = SHOW_INTRO_VIDEOS ? 5 : 4,
  stepLabel,
}: SliderHeaderProps) {
  const { dictionary: t } = useI18n();
  const tRecord = t as Record<string, string>;

  const defaultStepLabel = (tRecord["Step {step} of {total}"] || "Step {step} of {total}")
    .replace("{step}", String(index + 1))
    .replace("{total}", String(totalSteps));

  return (
    <div className="text-center">
      <p className="text-[#747474] group-10 font-semibold">
        {stepLabel || defaultStepLabel}
      </p>
      <p className="text-[#111111] group-16 font-bold">{title}</p>
    </div>
  );
}

export default SliderHeader;