"use client"

import { useEnterDetailsStore } from "@/stores/enter-details"

import { RoomContext } from "@/contexts/Details/Room"

import type { RoomProviderProps } from "@/types/providers/details/room"

export default function RoomProvider({ children, idx }: RoomProviderProps) {
  const { actions, activeRoom, currentStep, isComplete, room, steps } =
    useEnterDetailsStore((state) => ({
      actions: state.rooms[idx].actions,
      activeRoom: state.activeRoom,
      currentStep: state.rooms[idx].currentStep,
      isComplete: state.rooms[idx].isComplete,
      room: state.rooms[idx].room,
      steps: state.rooms[idx].steps,
    }))
  return (
    <RoomContext.Provider
      value={{
        actions,
        currentStep,
        isComplete,
        isActiveRoom: activeRoom === idx,
        room,
        roomNr: idx + 1,
        steps,
      }}
    >
      {children}
    </RoomContext.Provider>
  )
}