// components/Quran.jsx
import React, { useState, useEffect } from "react";

export function Quran() {
  const [surahs, setSurahs] = useState([]);
  const [selectedSurah, setSelectedSurah] = useState(null);
  const [ayahs, setAyahs] = useState([]);

  useEffect(() => {
    fetch("https://api.alquran.cloud/v1/surah")
      .then(res => res.json())
      .then(data => setSurahs(data.data));
  }, []);

  const loadSurah = (number) => {
    fetch(`https://api.alquran.cloud/v1/surah/${number}`)
      .then(res => res.json())
      .then(data => {
        setSelectedSurah(data.data.name);
        setAyahs(data.data.ayahs);
      });
  };

  return (
    <div>
      <h2 className="text-xl font-bold mb-2">القرآن الكريم</h2>
      <div className="mb-4 max-h-40 overflow-y-auto">
        {surahs.map(surah => (
          <button
            key={surah.number}
            onClick={() => loadSurah(surah.number)}
            className="block text-right w-full py-1 px-2 hover:bg-green-100 dark:hover:bg-green-800 rounded"
          >
            {surah.name}
          </button>
        ))}
      </div>
      {selectedSurah && (
        <div>
          <h3 className="text-lg font-semibold mb-2">{selectedSurah}</h3>
          <div className="max-h-64 overflow-y-auto space-y-2 text-right leading-loose">
            {ayahs.map(ayah => (
              <p key={ayah.numberInSurah}>
                <span className="text-green-600 dark:text-green-300 font-bold">
                  ({ayah.numberInSurah})
                </span> {ayah.text}
              </p>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}