import { useIntl } from "react-intl" import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting" import Body from "@scandic-hotels/design-system/Body" import Caption from "@scandic-hotels/design-system/Caption" import { Divider } from "@scandic-hotels/design-system/Divider" import Image from "@scandic-hotels/design-system/Image" import styles from "./ancillaryCard.module.css" import type { AncillaryCardProps } from "@/types/components/ancillaryCard" export function AncillaryCard({ ancillary }: AncillaryCardProps) { const intl = useIntl() const priceMsg = `${formatPrice(intl, ancillary.price.total, ancillary.price.currency)} ${ancillary.price.text ?? ""}` return (
{ancillary.imageUrl ? ( {ancillary.title} ) : null}
{ancillary.title}
{ancillary.price.included ? intl.formatMessage({ defaultMessage: "Included", }) : priceMsg} {ancillary.points && ( <>
{intl.formatMessage( { defaultMessage: "{value} points", }, { value: ancillary.points, } )} )}
{ancillary.description && (
)}
) }