"use client"

import { useIntl } from "react-intl"

import { EditIcon, ImageIcon } from "@/components/Icons"
import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"

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

export default function SelectedRoom() {
  const intl = useIntl()
  return (
    <article className={styles.container}>
      <div className={styles.tempImage}>
        <ImageIcon
          color="baseButtonTertiaryOnFillNormal"
          height={60}
          width={60}
        />
      </div>
      <div className={styles.content}>
        <div className={styles.textContainer}>
          <Footnote
            className={styles.label}
            color="uiTextPlaceholder"
            textTransform="uppercase"
          >
            {intl.formatMessage({ id: "Your room" })}
          </Footnote>
          <div className={styles.text}>
            {/**
             * [TEMP]
             * No translation on Subtitles as they will be derived
             * from Room selection.
             */}
            <Subtitle
              className={styles.room}
              color="uiTextHighContrast"
              type="two"
            >
              Cozy cabin
            </Subtitle>
            <Subtitle
              className={styles.invertFontWeight}
              color="uiTextMediumContrast"
              type="two"
            >
              Free rebooking
            </Subtitle>
            <Subtitle
              className={styles.invertFontWeight}
              color="uiTextMediumContrast"
              type="two"
            >
              Pay now
            </Subtitle>
          </div>
        </div>
        <Button
          asChild
          intent="tertiary"
          size="small"
          theme="base"
          variant="icon"
        >
          <Link href="#">
            <EditIcon color="baseButtonTertiaryOnFillNormal" />
            {intl.formatMessage({ id: "Modify" })}
          </Link>
        </Button>
      </div>
    </article>
  )
}