import { useIntl } from "react-intl" import { Divider } from "@scandic-hotels/design-system/Divider" import Image from "@/components/Image" import Body from "@/components/TempDesignSystem/Text/Body" import Caption from "@/components/TempDesignSystem/Text/Caption" import { formatPrice } from "@/utils/numberFormatting" 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 && (
)}
) }