"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 ButtonLink from "@/components/ButtonLink"
import ImageGallery from "@/components/ImageGallery"
import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"

import { getRoomNameAsParam } from "../../utils"

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

import type { RoomCardProps } from "@/types/components/hotelPage/room"

export function RoomCard({ room }: RoomCardProps) {
  const { images, name, roomSize, totalOccupancy } = room
  const intl = useIntl()

  const size =
    roomSize?.min === roomSize?.max
      ? `${roomSize.min} m²`
      : `${roomSize.min} - ${roomSize.max} m²`

  const galleryImages = mapApiImagesToGalleryImages(images)

  return (
    <article className={styles.roomCard}>
      <div className={styles.imageContainer}>
        <ImageGallery
          images={galleryImages}
          title={intl.formatMessage(
            {
              defaultMessage: "{title} - Image gallery",
            },
            { title: name }
          )}
          fill
          sizes="(min-width: 768px) 320px, 100vw"
          hideLabel={true}
        />
      </div>
      <div className={styles.content}>
        <div className={styles.innerContent}>
          <Typography variant="Title/Subtitle/lg">
            <h3>{name}</h3>
          </Typography>
          <Typography variant="Body/Paragraph/mdRegular">
            <p className={styles.roomSize}>
              {intl.formatMessage(
                {
                  defaultMessage:
                    "{size} ({max, plural, one {{range} guest} other {{range} guests}})",
                },
                {
                  size,
                  max: totalOccupancy.max,
                  range: totalOccupancy.range,
                }
              )}
            </p>
          </Typography>
        </div>
        <ButtonLink
          href={`?s=room-${getRoomNameAsParam(name)}`}
          variant="Text"
          size="Medium"
          typography="Body/Paragraph/mdBold"
          scroll={false}
          className={styles.buttonLink}
        >
          {intl.formatMessage({
            defaultMessage: "See room details",
          })}
          <MaterialIcon icon="chevron_right" size={24} color="CurrentColor" />
        </ButtonLink>
      </div>
    </article>
  )
}
