import { useAddAncillaryStore } from "@/stores/my-stay/add-ancillary-flow"

import { AncillaryCard } from "@/components/TempDesignSystem/AncillaryCard"
import { trackViewAncillary } from "@/utils/tracking/myStay"

import type { SelectedAncillary } from "@/types/components/myPages/myStay/ancillaries"

interface WrappedAncillaryProps {
  ancillary: SelectedAncillary
}

export default function WrappedAncillaryCard({
  ancillary,
}: WrappedAncillaryProps) {
  const { description, ...ancillaryWithoutDescription } = ancillary
  const { selectAncillary, booking } = useAddAncillaryStore((state) => ({
    selectAncillary: state.selectAncillary,
    booking: state.booking,
  }))

  return (
    <div
      role="button"
      onClick={() => {
        selectAncillary(ancillary)
        trackViewAncillary(ancillary, booking)
      }}
    >
      <AncillaryCard ancillary={ancillaryWithoutDescription} />
    </div>
  )
}