import { ArrowRightIcon, ScandicLogoIcon } from "@/components/Icons"
import Image from "@/components/Image"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"

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

import { StaySectionProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"

export default async function StaySection({ hotel, stay }: StaySectionProps) {
  const intl = await getIntl()

  const nightsText =
    stay.nights > 1
      ? intl.formatMessage({ id: "nights" })
      : intl.formatMessage({ id: "night" })

  return (
    <>
      <section className={styles.card}>
        <Image
          src={hotel.image}
          alt=""
          height={400}
          width={200}
          className={styles.image}
        />
        <div className={styles.info}>
          <div className={styles.hotel}>
            <ScandicLogoIcon color="red" />
            <Title as="h5" textTransform="capitalize">
              {hotel.name}
            </Title>
            <Caption color="burgundy" className={styles.caption}>
              <span>{hotel.address}</span>
              <span>{hotel.phone}</span>
            </Caption>
          </div>
          <Body className={styles.stay}>
            <span>{`${stay.nights} ${nightsText}`}</span>
            <span className={styles.dates}>
              <span>{stay.start}</span>
              <ArrowRightIcon height={15} width={15} />
              <span>{stay.end}</span>
            </span>
          </Body>
        </div>
      </section>
      <section className={styles.table}>
        <div className={styles.breakfast}>
          <Body color="burgundy">
            {intl.formatMessage({ id: "Breakfast" })}
          </Body>
          <Caption className={styles.caption}>
            <span>{`${intl.formatMessage({ id: "Weekdays" })} ${hotel.breakfast.start}-${hotel.breakfast.end}`}</span>
            <span>{`${intl.formatMessage({ id: "Weekends" })} ${hotel.breakfast.start}-${hotel.breakfast.end}`}</span>
          </Caption>
        </div>
        <div className={styles.checkIn}>
          <Body color="burgundy">{intl.formatMessage({ id: "Check in" })}</Body>
          <Caption className={styles.caption}>
            <span>{intl.formatMessage({ id: "From" })}</span>
            <span>{hotel.checkIn}</span>
          </Caption>
        </div>
        <div className={styles.checkOut}>
          <Body color="burgundy">
            {intl.formatMessage({ id: "Check out" })}
          </Body>
          <Caption className={styles.caption}>
            <span>{intl.formatMessage({ id: "At latest" })}</span>
            <span>{hotel.checkOut}</span>
          </Caption>
        </div>
      </section>
    </>
  )
}
