"use client"

import { useEnterDetailsStore } from "../../../stores/enter-details"
import { SidePanel } from "../../SidePanel"
import SummaryUI from "./UI"

type Props = {
  isUserLoggedIn: boolean
}

export default function DesktopSummary({ isUserLoggedIn }: Props) {
  const toggleSummaryOpen = useEnterDetailsStore(
    (state) => state.actions.toggleSummaryOpen
  )

  const { booking, rooms, totalPrice, vat, defaultCurrency } =
    useEnterDetailsStore((state) => ({
      booking: state.booking,
      rooms: state.rooms,
      totalPrice: state.totalPrice,
      vat: state.vat,
      defaultCurrency: state.defaultCurrency,
    }))

  return (
    <SidePanel variant="summary">
      <SummaryUI
        booking={booking}
        rooms={rooms}
        isUserLoggedIn={isUserLoggedIn}
        totalPrice={totalPrice}
        vat={vat}
        toggleSummaryOpen={toggleSummaryOpen}
        defaultCurrency={defaultCurrency}
      />
    </SidePanel>
  )
}