"use client"

import { useEnterDetailsStore } from "@/stores/enter-details"

import SignupPromoMobile from "@/components/HotelReservation/SignupPromo/Mobile"

import SummaryUI from "../UI"
import SummaryBottomSheet from "./BottomSheet"

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

import type { SummaryProps } from "@/types/components/hotelReservation/summary"
import type { DetailsState } from "@/types/stores/enter-details"

function storeSelector(state: DetailsState) {
  return {
    join: state.guest.join,
    membershipNo: state.guest.membershipNo,
  }
}

export default function MobileSummary(props: SummaryProps) {
  const { join, membershipNo } = useEnterDetailsStore(storeSelector)
  const showPromo = !props.isMember && !join && !membershipNo
  return (
    <div className={styles.mobileSummary}>
      {showPromo ? <SignupPromoMobile /> : null}
      <SummaryBottomSheet>
        <div className={styles.wrapper}>
          <SummaryUI {...props} />
        </div>
      </SummaryBottomSheet>
    </div>
  )
}