"use client"
import { useIntl } from "react-intl"

import Caption from "@/components/TempDesignSystem/Text/Caption"
import Title from "@/components/TempDesignSystem/Text/Title"
import { formatPrice } from "@/utils/numberFormatting"

import styles from "./selectionCard.module.css"

import type { SelectionCardProps } from "@/types/components/hotelReservation/selectRate/selectionCard"

export default function SelectionCard({
  price,
  membersPrice,
  currency,
  title,
  subtext,
}: SelectionCardProps) {
  const intl = useIntl()

  return (
    <div className={styles.card}>
      <div>
        <Title className={styles.name} as="h4" level="h3">
          {title}
        </Title>
        <div className={styles.nameInfo}>i</div>
      </div>
      <Caption color="burgundy">{subtext}</Caption>

      <div>
        <Caption color="burgundy" className={styles.price}>
          {intl.formatMessage(
            { id: "{price}/night" },
            {
              price: formatPrice(intl, price, currency),
            }
          )}
        </Caption>

        {membersPrice && (
          <Caption color="burgundy" className={styles.membersPrice}>
            {intl.formatMessage(
              { id: "Members {price}/night" },
              { price: formatPrice(intl, membersPrice, currency) }
            )}
          </Caption>
        )}
      </div>
    </div>
  )
}