"use client";

import { IFunnelPaymentPlacement } from "@/entities/session/funnel/types";

import { Progress, useMultiPageNavigationContext } from "..";

interface IProgressLayoutProps {
  children: React.ReactNode;
}

export default function ProgressLayout({ children }: IProgressLayoutProps) {
  const { navigation } = useMultiPageNavigationContext();

  const progressItems = navigation.data.map((item: IFunnelPaymentPlacement) => {
    return item.title || item.type || "";
  });

  return (
    <>
      <Progress
        items={progressItems}
        activeItemIndex={navigation.currentIndex}
      />
      {children}
    </>
  );
}
