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

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

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

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

export default function StayCard({
  stay,
  lang,
  shouldShowDayCount = false,
}: StayCardProps) {
  const { dateArrive, dateDepart, guests, hotel } = stay

  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}>
        {shouldShowDayCount ? (
          <div className={styles.badge}>
            <time className={styles.time}>In {daysUntilArrival} days</time>
          </div>
        ) : null}
        <Image
          alt="Placeholder image flower"
          height={73}
          src="/_static/icons/flower-image.svg"
          width={73}
        />
      </div>
      <footer className={styles.footer}>
        <Title as="h5" level="h3" uppercase className={styles.hotel}>
          {hotel}
        </Title>
        <section className={styles.container}>
          <div className={styles.date}>
            <Image
              alt="Calendar Icon"
              height={20}
              src="/_static/icons/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="/_static/icons/person.svg"
              width={20}
            />
            <span>
              {guests} guest{guests > 1 ? "s" : ""}
            </span>
          </div>
        </section>
      </footer>
    </article>
  )
}