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

import ButtonLink from "@/components/ButtonLink"
import Image from "@/components/Image"
import Divider from "@/components/TempDesignSystem/Divider"
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={400}
        height={300}
        sizes="(min-width: 768px) 400px, 100vw"
        className={styles.image}
      />
      <section className={styles.content}>
        <div className={styles.intro}>
          <HotelLogoIcon hotelId={hotel.operaId} hotelType={hotel.hotelType} />
          <Typography variant="Title/Subtitle/lg">
            <h4>{hotel.name}</h4>
          </Typography>
          <Typography variant="Body/Supporting text (caption)/smRegular">
            <div className={styles.captions}>
              <span>{hotel.address.streetAddress}</span>
              <Divider variant="vertical" color="Border/Divider/Default" />
              <span>
                {intl.formatMessage(
                  {
                    defaultMessage: "{number} km to city center",
                  },
                  {
                    number: getSingleDecimal(
                      hotel.location.distanceToCentre / 1000
                    ),
                  }
                )}
              </span>
            </div>
          </Typography>
        </div>
        <Typography variant="Body/Paragraph/mdRegular">
          <p>{description}</p>
        </Typography>

        {cta.url ? (
          <>
            <Divider
              className={styles.ctaDivider}
              variant="horizontal"
              color="borderDividerSubtle"
            />
            <ButtonLink
              variant="Primary"
              size="Small"
              href={cta.url}
              target={cta.openInNewTab ? "_blank" : "_self"}
              className={styles.button}
            >
              {cta.text}
            </ButtonLink>
          </>
        ) : null}
      </section>
    </article>
  )
}