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()

  const priceMsg = `${formatPrice(intl, ancillary.price.total, ancillary.price.currency)} ${ancillary.price.text ?? ""}`

  return (
    <article className={styles.ancillaryCard}>
      <div className={styles.imageContainer}>
        {ancillary.imageUrl ? (
          <Image
            className={styles.image}
            src={ancillary.imageUrl}
            alt={ancillary.title}
            fill
            style={{ opacity: ancillary.imageOpacity ?? 1 }}
          />
        ) : null}
      </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({
                    defaultMessage: "Included",
                  })
                : priceMsg}
            </Body>

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