"use client"

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

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

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

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

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

interface CityListItemProps {
  city: DestinationCityListItem
}

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

  return (
    <article className={styles.cityListItem}>
      <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 && (
          <div className={styles.experienceList}>
            <ExperienceList experiences={city.experiences} />
          </div>
        )}
        <div className={styles.ctaWrapper}>
          <Button intent="tertiary" theme="base" size="small" asChild>
            <Link href={city.url}>
              {intl.formatMessage(
                {
                  defaultMessage: "Explore {city}",
                },
                { city: city.cityName }
              )}
            </Link>
          </Button>
        </div>
      </section>
    </article>
  )
}
