"use client"

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

import SidePanel from "@/components/HotelReservation/SidePanel"

import SummaryUI from "./UI"

import type { SummaryProps } from "@/types/components/hotelReservation/summary"

export default function DesktopSummary({ isUserLoggedIn }: SummaryProps) {
  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>
  )
}