"use client";
import React, { createContext, ReactNode, useContext, useState } from "react";

interface PreviewSliderType {
  isModalPreviewOpen: boolean;
  silderImage: string[];
  openPreviewModal: (item: string[]) => void;
  closePreviewModal: () => void;
}

const PreviewSlider = createContext<PreviewSliderType | undefined>(undefined);

export const usePreviewSlider = () => {
  const context = useContext(PreviewSlider);
  if (!context) {
    throw new Error("usePreviewSlider must be used within a ModalProvider");
  }
  return context;
};

export const PreviewSliderProvider = ({
  children,
}: {
  children: ReactNode;
}) => {
  const [isModalPreviewOpen, setIsModalOpen] = useState(false);
  const [silderImage, setSilderImage] = useState<string[]>([]);

  const openPreviewModal = (item: string[]) => {
    setIsModalOpen(true);
    setSilderImage(item);
  };

  const closePreviewModal = () => {
    setIsModalOpen(false);
    setSilderImage([]);
  };

  return (
    <PreviewSlider.Provider
      value={{
        isModalPreviewOpen,
        silderImage,
        openPreviewModal,
        closePreviewModal,
      }}
    >
      {children}
    </PreviewSlider.Provider>
  );
};