"use client"

import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
import { ReactElement } from 'react';
import { list } from "@/api/transmissions";

interface TransmissionContextType {
    transmission: ReactElement | null;
    setTransmission: (content: ReactElement | null) => void;
}

const TransmissionContext = createContext<TransmissionContextType | undefined>(undefined);

export const TransmissionProvider = ({ children }: { children: ReactNode }) => {
    const [transmission, setTransmission] = useState<any | null>(null);

    const fetchData = async () => {
        setTransmission(await list());
    };

    useEffect(() => {
        fetchData();
    }, []);

    return (
        <TransmissionContext.Provider value={{ transmission, setTransmission }}>
            {children}
        </TransmissionContext.Provider>
    );
};

export const useTransmissionContext = (): TransmissionContextType => {
    const context = useContext(TransmissionContext);
    if (!context) {
        throw new Error('useTransmissionContext must be used within a TransmissionProvider');
    }
    return context;
};
