import { useState, useEffect } from 'react';
import materialService from '../services/materialService';
import { useSlugContext } from '../../../../utils/SlugContext';

const useMaterials = (section, topic, level) => {
  const [materials, setMaterial] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const { topicSlugMap } = useSlugContext();

  useEffect(() => {
    const fetchData = async () => {
        try {
            const data = await materialService.fetchMaterials(topicSlugMap[topic], level);
            setMaterial(data[0]);
        } catch (err) {
            setError(err);
        } finally {
            setLoading(false);
        }
    };

    fetchData();
  }, [section, topic, level]);

  return { materials, loading, error };
};

export default useMaterials;
