import { useState, useEffect } from 'react';
import { API_CONFIG } from '../config/constants';
import defaultSongs from '../defaultSong.json';

export const useAudioData = () => {
  const [pages, setPages] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(API_CONFIG.jsonUrl);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();

        const processedPages = data.pages.map(page => {
          if (page.useDefault) {
            return {
              ...page,
              audioFiles: defaultSongs.defaultSongs.map(song => `neon230817/${page.name}/${song}`)
            };
          }
          return page;
        });

        setPages(processedPages);
        setIsLoading(false);
      } catch (e) {
        console.error('Error fetching data:', e);
        setError(`Error loading data: ${e.message}`);
        setIsLoading(false);
      }
    };

    fetchData();
  }, []);

  return { pages, isLoading, error };
};