"use client"
import { useMyStayStore } from "@/stores/my-stay"

import NotUpcoming from "./NotUpcoming"
import Upcoming from "./Upcoming"

import styles from "./actions.module.css"

export default function Actions() {
  const isCancelled = useMyStayStore((state) => state.bookedRoom.isCancelled)
  const isPastBooking = useMyStayStore((state) => state.isPastBooking)

  const isActionable = !isCancelled && !isPastBooking
  return (
    <div className={styles.actionArea}>
      {isActionable ? <Upcoming /> : <NotUpcoming />}
    </div>
  )
}