import HotelLogoIcon from "@scandic-hotels/design-system/Icons/HotelLogoIcon"

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,
  additionalData,
  contentType = "hotel",
  url,
}: HotelListingItemProps) {
  const intl = await getIntl()
  const { description, image, cta } = getTypeSpecificInformation(
    intl,
    contentType,
    hotel.hotelContent,
    additionalData,
    url
  )

  return (
    <article className={styles.container}>
      <Image
        src={image.src}
        alt={image.alt}
        width={300}
        height={200}
        className={styles.image}
      />
      <section className={styles.content}>
        <div className={styles.intro}>
          <HotelLogoIcon 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 center" },
                {
                  number: getSingleDecimal(
                    hotel.location.distanceToCentre / 1000
                  ),
                }
              )}
            </Caption>
          </div>
        </div>
        <Body>{description}</Body>

        {cta.url && (
          <Button
            intent="primary"
            theme="base"
            size="small"
            className={styles.button}
            asChild
          >
            <Link
              href={cta.url}
              color="white"
              target={cta.openInNewTab ? "_blank" : "_self"}
            >
              {cta.text}
            </Link>
          </Button>
        )}
      </section>
    </article>
  )
}
