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

export function Hadith() {
  const [hadith, setHadith] = useState("");

  useEffect(() => {
    fetch("https://api.hadith.sutanlab.id/books/muslim?range=1-300")
      .then(res => res.json())
      .then(data => {
        const items = data.data.hadiths;
        const random = items[Math.floor(Math.random() * items.length)];
        setHadith(random.arab);
      });
  }, []);

  return (
    <div>
      <h2 className="text-xl font-bold mb-2">حديث شريف</h2>
      <p className="text-right leading-loose">{hadith}</p>
    </div>
  );
}