'use client'

import { SpaceNav } from "@/components/space-nav"
import { QuoteCard } from "@/components/quote-card"
import { Messages } from "@/components/messages"
import { Podcast } from "@/components/podcast"
import { CalendarWidget } from "@/components/calendar-widget"
import { News } from "@/components/news"
import { Todo } from "@/components/todo"
import { useEffect, useState } from "react"

const backgroundImages = [
  'https://images.pexels.com/photos/1169754/pexels-photo-1169754.jpeg',
  'https://images.pexels.com/photos/1252890/pexels-photo-1252890.jpeg',
  'https://images.pexels.com/photos/1167355/pexels-photo-1167355.jpeg',
  'https://images.pexels.com/photos/816608/pexels-photo-816608.jpeg',
  'https://images.pexels.com/photos/1146134/pexels-photo-1146134.jpeg'
]

export default function Page() {
  const [currentBgIndex, setCurrentBgIndex] = useState(0)

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentBgIndex((prevIndex) => 
        prevIndex === backgroundImages.length - 1 ? 0 : prevIndex + 1
      )
    }, 120000) // 2 minutes in milliseconds

    return () => clearInterval(interval)
  }, [])

  return (
    <div 
      className="min-h-screen bg-cover bg-center bg-no-repeat transition-all duration-1000"
      style={{ backgroundImage: `url(${backgroundImages[currentBgIndex]})` }}
    >
      <div className="min-h-screen bg-black/50"> {/* Dark overlay for better readability */}
        <SpaceNav />
        <div className="container mx-auto p-4">
          <div className="grid grid-cols-1 md:grid-cols-6 lg:grid-cols-12 gap-4">
            <div className="col-span-1 md:col-span-2 lg:col-span-3">
              <QuoteCard />
              <div className="mt-4">
                <News />
              </div>
            </div>
            <div className="col-span-1 md:col-span-4 lg:col-span-6">
              <Messages />
            </div>
            <div className="col-span-1 md:col-span-2 lg:col-span-3 space-y-4">
              <Podcast />
              <CalendarWidget />
              <Todo />
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}