"use client";
import React, { useRef, useState, useEffect } from "react";
import { motion, useInView } from "framer-motion";
import { quotes } from "@/constants/quotes";
import { Quote as QuoteIcon } from "lucide-react";

export const Quote = () => {
  const ref = useRef(null);
  const inView = useInView(ref, { once: true, margin: "-100px" });
  const [quote, setQuote] = useState({ text: "", author: "" });

  useEffect(() => {
    // Get current day of the month (1-31)
    const day = new Date().getDate();
    // Use it as index (1 -> index 0, 31 -> index 30)
    // Safety check with modulo just in case, though 31 % 31 = 0, so subtract 1 first
    const index = (day - 1) % quotes.length;
    setQuote(quotes[index]);
  }, []);

  return (
    <section id="quote" className="py-24 t">
      <div className="px-4 sm:px-6 lg:px-8 max-w-4xl mx-auto text-center">
        <motion.div
          ref={ref}
          initial={{ opacity: 0, y: 20 }}
          animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
          transition={{ duration: 0.6 }}
          className="relative"
        >
            {/* Background Quote Icon */}
            <div className="absolute -top-12 left-1/2 -translate-x-1/2 text-zinc-200 dark:text-zinc-700 z-0 select-none">
                <QuoteIcon className="w-32 h-32 md:w-48 md:h-48 fill-current opacity-50" />
            </div>

            {/* Quote Content */}
            <div className="relative z-10 flex flex-col items-center gap-6">
                <h2 className="text-2xl md:text-4xl font-bold text-zinc-900 dark:text-zinc-100 italic leading-relaxed font-serif">
                "{quote.text}"
                </h2>
                <div className="flex flex-col items-center gap-2">
                <span className="w-12 h-1 bg-zinc-900 dark:bg-zinc-100 rounded-full" />
                <p className="text-sm font-semibold tracking-wider text-zinc-500 dark:text-zinc-400 uppercase">
                    {quote.author}
                </p>
                </div>
            </div>
        </motion.div>
      </div>
    </section>
  );
};
Daily Quote

""
