import { useIntl } from "react-intl"

import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
import { Divider } from "@scandic-hotels/design-system/Divider"
import Image from "@scandic-hotels/design-system/Image"
import { Typography } from "@scandic-hotels/design-system/Typography"

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>
          <Typography
            variant="Body/Paragraph/mdBold"
            className={styles.ancillaryTitle}
          >
            <p>{ancillary.title}</p>
          </Typography>

          <div className={styles.price}>
            <Typography>
              <p>
                {ancillary.price.included
                  ? intl.formatMessage({
                      id: "common.included",
                      defaultMessage: "Included",
                    })
                  : priceMsg}
              </p>
            </Typography>

            {ancillary.points && (
              <>
                <div>
                  <Divider variant="vertical" />
                </div>
                <Typography
                  variant="Body/Paragraph/mdRegular"
                  className={styles.ancillaryPoints}
                >
                  <p>
                    {intl.formatMessage(
                      {
                        id: "common.numberOfPoints",
                        defaultMessage:
                          "{points, plural, one {# point} other {# points}}",
                      },
                      {
                        points: ancillary.points,
                      }
                    )}
                  </p>
                </Typography>
              </>
            )}
          </div>
        </div>
        {ancillary.description && (
          <Typography variant="Body/Supporting text (caption)/smRegular">
            <div dangerouslySetInnerHTML={{ __html: ancillary.description }} />
          </Typography>
        )}
      </div>
    </article>
  )
}