import HotelLogo from "@/components/Icons/Logos"
import Image from "@/components/Image"
import Button from "@/components/TempDesignSystem/Button"
import Divider from "@/components/TempDesignSystem/Divider"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"
import { getSingleDecimal } from "@/utils/numberFormatting"

import { getTypeSpecificInformation } from "./utils"

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

import type { HotelListingItemProps } from "@/types/components/contentPage/hotelListingItem"

export default async function HotelListingItem({
  hotel,
  contentType = "hotel",
  url,
}: HotelListingItemProps) {
  const intl = await getIntl()
  const { description, imageSrc, altText } = getTypeSpecificInformation(
    contentType,
    hotel
  )

  return (
    <article className={styles.container}>
      <Image
        src={imageSrc}
        alt={altText}
        width={300}
        height={200}
        className={styles.image}
      />
      <section className={styles.content}>
        <div className={styles.intro}>
          <HotelLogo hotelId={hotel.operaId} hotelType={hotel.hotelType} />
          <Subtitle asChild>
            <Title as="h3">{hotel.name}</Title>
          </Subtitle>
          <div className={styles.captions}>
            <Caption color="uiTextPlaceholder">
              {hotel.address.streetAddress}
            </Caption>
            <div className={styles.dividerContainer}>
              <Divider variant="vertical" color="beige" />
            </div>
            <Caption color="uiTextPlaceholder">
              {intl.formatMessage(
                { id: "{number} km to city centre" },
                {
                  number: getSingleDecimal(
                    hotel.location.distanceToCentre / 1000
                  ),
                }
              )}
            </Caption>
          </div>
        </div>
        <Body>{description}</Body>
        {url && (
          <Button
            intent="primary"
            theme="base"
            size="small"
            className={styles.button}
            asChild
          >
            <Link href={url} color="white">
              {intl.formatMessage({ id: "See hotel details" })}
            </Link>
          </Button>
        )}
      </section>
    </article>
  )
}
