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

export function PrayerTimes() {
  const [times, setTimes] = useState(null);

  useEffect(() => {
    navigator.geolocation.getCurrentPosition(async (position) => {
      const { latitude, longitude } = position.coords;
      const res = await fetch(`https://api.aladhan.com/v1/timings?latitude=${latitude}&longitude=${longitude}`);
      const data = await res.json();
      setTimes(data.data.timings);
    });
  }, []);

  if (!times) return <p>جارٍ تحميل مواقيت الصلاة...</p>;

  return (
    <div>
      <h2 className="text-xl font-bold mb-2">مواقيت الصلاة</h2>
      <ul className="space-y-1">
        {Object.entries(times).map(([name, time]) => (
          <li key={name}><strong>{name}:</strong> {time}</li>
        ))}
      </ul>
    </div>
  );
}