"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(props: SummaryProps) {
  const {
    booking,
    actions: { toggleSummaryOpen, togglePriceDetailsModalOpen },
    totalPrice,
    vat,
  } = useEnterDetailsStore((state) => state)

  const rooms = useEnterDetailsStore((state) => state.rooms)

  return (
    <SidePanel variant="summary">
      <SummaryUI
        booking={booking}
        rooms={rooms}
        isMember={props.isMember}
        breakfastIncluded={props.breakfastIncluded}
        totalPrice={totalPrice}
        vat={vat}
        toggleSummaryOpen={toggleSummaryOpen}
        togglePriceDetailsModalOpen={togglePriceDetailsModalOpen}
      />
    </SidePanel>
  )
}