import { ScandicLogoIcon } from "@/components/Icons"
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 styles from "./hotelListingItem.module.css"

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

export default async function HotelListingItem({
  imageUrl,
  altText,
  name,
  address,
  distanceToCentre,
  description,
  link,
}: HotelListingItemProps) {
  const intl = await getIntl()

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