import { useEffect, useState } from "react"
import { Outlet, useLocation } from "react-router-dom"
import AnnouncementModal from "@/components/composites/dialogs/announcementModal"
import Foot from "./foot"
import Header from "./header"

export default function LayoutPage() {
  const location = useLocation()
  const [isOpen, setIsOpen] = useState(false)

  useEffect(() => {
    if (location.pathname === "/") {
      setIsOpen(true)
    } else {
      setIsOpen(false)
    }
  }, [location.pathname])

  return (
    <div className="bg-blue-50 flex flex-col items-stretch relative min-h-screen">
      <Header />
      <main className="flex-1">
        <Outlet />
      </main>
      <Foot />

      <AnnouncementModal open={isOpen} onOpenChange={setIsOpen} />
    </div>
  )
}