"use client";
import { CameraDevice, Html5Qrcode } from "html5-qrcode";
import React, { createContext, useContext, useEffect, useState } from "react";

export const CameraContext = createContext<CameraDevice[]>([]);

export const CameraProvider: React.FC<{ children: React.ReactNode }> = ({
  children,
}) => {
  const [cameras, setCameras] = useState<CameraDevice[]>([]);

  useEffect(() => {
    const fetchCameras = async () => {
      const res = await Html5Qrcode.getCameras();
      if (res) {
        setCameras(res);
      }
    };

    fetchCameras();
  }, []);

  return (
    <CameraContext.Provider value={cameras}>{children}</CameraContext.Provider>
  );
};