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

import { dt } from "@/lib/dt"

import { CalendarIcon, PersonIcon } from "@/components/Icons"
import Image from "@/components/Image"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Title from "@/components/TempDesignSystem/Text/Title"

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

import type { StayCardProps } from "@/types/components/myPages/stays/stayCard"

export default function StayCard({ stay, lang }: StayCardProps) {
  const { checkinDate, checkoutDate, hotelInformation } = stay.attributes
  const { formatMessage } = useIntl()
  const arrival = dt(checkinDate).locale(lang)
  const arrivalDate = arrival.format("DD MMM")
  const arrivalDateTime = arrival.format("YYYY-MM-DD")
  const depart = dt(checkoutDate).locale(lang)
  const departDate = depart.format("DD MMM YYYY")
  const departDateTime = depart.format("YYYY-MM-DD")

  const tempGuestAmount = 3

  return (
    <article className={styles.stay}>
      <Image
        className={styles.image}
        alt={hotelInformation.hotelContent.images.metaData.altText}
        src={hotelInformation.hotelContent.images.imageSizes.small}
        width={420}
        height={240}
      />
      <footer className={styles.footer}>
        <Title as="h5" className={styles.hotel} level="h3">
          {hotelInformation.hotelName}
        </Title>
        <div className={styles.information}>
          <div className={styles.date}>
            <CalendarIcon color="burgundy" className={styles.icon} />
            <Caption asChild>
              <time dateTime={arrivalDateTime}>{arrivalDate}</time>
            </Caption>
            {" - "}
            <Caption asChild>
              <time dateTime={departDateTime}>{departDate}</time>
            </Caption>
          </div>
          <div className={styles.guest}>
            <PersonIcon color="burgundy" className={styles.icon} />
            <Caption>{`${tempGuestAmount} ${tempGuestAmount > 1 ? formatMessage({ id: "Guests" }) : formatMessage({ id: "Guest" })}`}</Caption>
          </div>
        </div>
      </footer>
    </article>
  )
}