// src/App.jsx
import React, { useState, useEffect } from "react";
import { Card, CardContent } from "./components/ui/Card";
import { Button } from "./components/ui/Button";
import { Sun, Moon } from "lucide-react";
import { Quran } from "./components/Quran";
import { PrayerTimes } from "./components/PrayerTimes";
import { Hadith } from "./components/Hadith";
import { Sunnah } from "./components/Sunnah";
import { Azkar } from "./components/Azkar";
import { IslamicQuotes } from "./components/IslamicQuotes";

export default function MuslimApp() {
  const [darkMode, setDarkMode] = useState(false);
  const toggleDark = () => setDarkMode(!darkMode);

  useEffect(() => {
    document.documentElement.classList.toggle("dark", darkMode);
  }, [darkMode]);

  return (
    <div className="min-h-screen bg-gradient-to-b from-green-50 to-white dark:from-gray-900 dark:to-gray-800 text-black dark:text-white font-[Cairo]">
      <header className="p-6 flex justify-between items-center shadow-md dark:shadow-white border-b dark:border-white">
        <h1 className="text-4xl font-extrabold text-green-700 dark:text-green-300">
          Muslim | مسلم
        </h1>
        <Button onClick={toggleDark} variant="ghost">
          {darkMode ? <Sun /> : <Moon />}
        </Button>
      </header>

      <main className="p-6 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
        <Card className="shadow-lg border-2 border-green-100 dark:border-green-900">
          <CardContent><PrayerTimes /></CardContent>
        </Card>
        <Card className="shadow-lg border-2 border-green-100 dark:border-green-900">
          <CardContent><Quran /></CardContent>
        </Card>
        <Card className="shadow-lg border-2 border-green-100 dark:border-green-900">
          <CardContent><Hadith /></CardContent>
        </Card>
        <Card className="shadow-lg border-2 border-green-100 dark:border-green-900">
          <CardContent><Sunnah /></CardContent>
        </Card>
        <Card className="shadow-lg border-2 border-green-100 dark:border-green-900">
          <CardContent><Azkar /></CardContent>
        </Card>
        <Card className="shadow-lg border-2 border-green-100 dark:border-green-900">
          <CardContent><IslamicQuotes /></CardContent>
        </Card>
      </main>

      <footer className="p-4 text-center border-t dark:border-white mt-6">
        <p className="text-sm text-gray-600 dark:text-gray-300">
          © 2025 Muslim | مسلم - All rights reserved
        </p>
      </footer>
    </div>
  );
}