import { useIntl } from "react-intl"

import Image from "@/components/Image"
import Divider from "@/components/TempDesignSystem/Divider"
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()

  return (
    <article className={styles.ancillaryCard}>
      <div className={styles.imageContainer}>
        <Image
          className={styles.image}
          src={ancillary.imageUrl}
          alt={ancillary.title}
          fill
          style={{ opacity: ancillary.imageOpacity ?? 1 }}
        />
      </div>
      <div className={styles.contentContainer}>
        <div>
          <Body textTransform="bold" color="uiTextHighContrast">
            {ancillary.title}
          </Body>

          <div className={styles.price}>
            <Body color="uiTextHighContrast">
              {ancillary.price.included
                ? intl.formatMessage({ id: "Included" })
                : `${formatPrice(
                    intl,
                    ancillary.price.total,
                    ancillary.price.currency
                  )} ${ancillary.price.text ?? ""}`}
            </Body>

            {ancillary.points && (
              <>
                <div>
                  <Divider variant="vertical" color="subtle" />
                </div>
                <Body textAlign="right" color="uiTextHighContrast">
                  {ancillary.points} {intl.formatMessage({ id: "Points" })}
                </Body>
              </>
            )}
          </div>
        </div>
        {ancillary.description && (
          <Caption asChild color="uiTextHighContrast">
            <div dangerouslySetInnerHTML={{ __html: ancillary.description }} />
          </Caption>
        )}
      </div>
    </article>
  )
}
