import Button from "@/components/TempDesignSystem/Button"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"

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

import { RoomCardProps } from "@/types/components/hotelReservation/selectRate/roomCard"

export default async function RoomCard({ room }: RoomCardProps) {
  const { formatMessage } = await getIntl()
  return (
    <div className={styles.card}>
      <div className={styles.cardBody}>
        <div>
          <Title className={styles.name} as="h5" level="h3">
            {room.name}
          </Title>
          <div className={styles.nameInfo}>i</div>
        </div>
        <Caption color="burgundy">{room.size}</Caption>
        <Caption color="burgundy">{room.description}</Caption>

        <Caption color="burgundy">
          {/* TODO: Handle currency and this whole line of text in a better way through intl */}
          {formatMessage({ id: "From" })}{" "}
          <span className={styles.price}>{room.pricePerNight}</span>{" "}
          {room.currency}/{formatMessage({ id: "night" })}
        </Caption>

        <Button
          asChild
          type="button"
          size="small"
          theme="primaryDark"
          className={styles.button}
        >
          <label htmlFor={`room-${room.id}`}>
            {formatMessage({ id: "Choose room" })}
          </label>
        </Button>
      </div>
      {/* TODO: maybe use the `Image` component instead of the `img` tag. Waiting until we know how to get the image */}
      {/* eslint-disable-next-line @next/next/no-img-element */}
      <img
        alt={formatMessage({ id: "A photo of the room" })}
        src={room.imageSrc}
      />
    </div>
  )
}