"use client"

import Link from "next/link"
import { useIntl } from "react-intl"

import ImageGallery from "@/components/ImageGallery"
import Button from "@/components/TempDesignSystem/Button"
import Divider from "@/components/TempDesignSystem/Divider"
import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { mapImageVaultImagesToGalleryImages } from "@/utils/imageGallery"

import ExperienceList from "../../ExperienceList"

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

import type { DestinationCityListItem } from "@/types/trpc/routers/contentstack/destinationCityPage"

interface CityListingItemProps {
  city: DestinationCityListItem
}

export default function CityListingItem({ city }: CityListingItemProps) {
  const intl = useIntl()
  const galleryImages = mapImageVaultImagesToGalleryImages(city.images || [])

  return (
    <article className={styles.container}>
      <div className={styles.imageWrapper}>
        <ImageGallery
          images={galleryImages}
          fill
          title={intl.formatMessage(
            {
              defaultMessage: "{title} - Image gallery",
            },
            { title: city.cityName }
          )}
        />
      </div>
      <section className={styles.content}>
        <Subtitle asChild>
          <h3>{city.heading}</h3>
        </Subtitle>
        {city.experiences?.length ? (
          <ExperienceList experiences={city.experiences} />
        ) : null}
        <Body>{city.preamble}</Body>

        <Divider variant="horizontal" color="primaryLightSubtle" />

        <div className={styles.ctaWrapper}>
          <Button
            intent="tertiary"
            theme="base"
            size="small"
            className={styles.button}
            asChild
          >
            <Link href={city.url}>
              {intl.formatMessage(
                {
                  defaultMessage: "Explore {city}",
                },
                { city: city.cityName }
              )}
            </Link>
          </Button>
        </div>
      </section>
    </article>
  )
}
