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

import Image from "@/components/Image"
import Title from "@/components/MyPages/Title"

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

import type { LangParams } from "@/types/params"
import type { StayProps } from "@/types/components/myPages/stays"

export default function Stay({
  dateArrive,
  dateDepart,
  guests,
  hotel,
  lang,
}: StayProps & LangParams) {
  const daysUntilArrival = dt(dateArrive).diff(dt(), "days")
  const arrival = dt(dateArrive).locale(lang)
  const arrivalDate = arrival.format("DD MMM")
  const arrivalDateTime = arrival.format("YYYY-MM-DD")
  const depart = dt(dateDepart).locale(lang)
  const departDate = depart.format("DD MMM YYYY")
  const departDateTime = depart.format("YYYY-MM-DD")
  return (
    <article className={styles.stay}>
      <div className={styles.imageContainer}>
        <div className={styles.badge}>
          <time className={styles.time}>In {daysUntilArrival} days</time>
        </div>
        <Image
          alt="Placeholder image flower"
          height={73}
          src="/flower-image.svg"
          width={73}
        />
      </div>
      <footer className={styles.footer}>
        <Title as="h4" level="h3" uppercase>
          {hotel}
        </Title>
        <section className={styles.container}>
          <div className={styles.date}>
            <Image
              alt="Calendar Icon"
              height={20}
              src="/calendar_month.svg"
              width={20}
            />
            <p>
              <time dateTime={arrivalDateTime}>{arrivalDate}</time>
              {" - "}
              <time dateTime={departDateTime}>{departDate}</time>
            </p>
          </div>
          <div className={styles.guests}>
            <Image alt="Guests Icon" height={20} src="/person.svg" width={20} />
            <span>
              {guests} guest{guests > 1 ? "s" : ""}
            </span>
          </div>
        </section>
      </footer>
    </article>
  )
}