web/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/WrappedAncillaryCard/index.tsx

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 = useAddAncillaryStore((state) => state.selectAncillary)

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