"use client";

import Header from "@/app/components/layout/Header";
import Footer from "@/app/components/layout/Footer";

import HoroscopeCard from "@/app/components/horoscope/HoroscopeCard";

import { useZodiacSigns } from "@/app/lib/useZodiacSigns";

export default function TomorrowHoroscopePage() {
  const { signs, imagesLoaded } = useZodiacSigns();

  return (
    <>
      <Header />
      <main className="horoscope-page">
        <section className="horoscope-container">
          <h1 className="horoscope-title">Tomorrow's Horoscope</h1>

          <div className="horoscope-picker-heading">
            <h2>Choose your sign</h2>
            <p>Read tomorrow's prediction for all 12 zodiac signs.</p>
          </div>

          <div className="horoscope-grid">
            {signs.map((zodiac) => (
              <HoroscopeCard
                key={zodiac.slug}
                zodiac={zodiac}
                type="tomorrow-horoscope"
                imagesLoaded={imagesLoaded}
              />
            ))}
          </div>
        </section>
      </main>
      <Footer />
    </>
  );
}