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

import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"

import { useMyStayStore } from "@/stores/my-stay"

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

export default function Cancellations() {
  const intl = useIntl()
  const rooms = useMyStayStore((state) => state.rooms)
  const cancelledRooms = rooms.filter((r) => r.isCancelled).length

  if (!cancelledRooms) {
    return null
  }

  const totalRoomsMsg = intl.formatMessage(
    {
      id: "booking.numberOfRooms",
      defaultMessage: "{totalRooms, plural, one {# room} other {# rooms}}",
    },
    { totalRooms: cancelledRooms }
  )

  return (
    <div className={styles.row}>
      <div className={styles.label}>
        <MaterialIcon icon="cancel" />
        <Typography variant="Body/Paragraph/mdRegular">
          <p className={styles.textDefault}>
            {intl.formatMessage({
              id: "common.cancellations",
              defaultMessage: "Cancellations",
            })}
          </p>
        </Typography>
      </div>

      <Typography variant="Body/Paragraph/mdRegular">
        <p className={styles.textDefault}>{totalRoomsMsg}</p>
      </Typography>
    </div>
  )
}