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

import { AncillaryCard } from "@/components/TempDesignSystem/AncillaryCard"

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)}>
      <AncillaryCard ancillary={ancillaryWithoutDescription} />
    </div>
  )
}