"use client"

import { useState } from "react"
import { useIntl } from "react-intl"

import Image from "@/components/Image"
import Lightbox from "@/components/Lightbox/"
import Button from "@/components/TempDesignSystem/Button"

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

import type { PreviewImagesProps } from "@/types/components/hotelPage/previewImages"

export default function PreviewImages({
  images,
  hotelName,
}: PreviewImagesProps) {
  const intl = useIntl()
  const [lightboxIsOpen, setLightboxIsOpen] = useState(false)

  return (
    <div className={styles.imageWrapper}>
      {images.slice(0, 3).map((image, index) => (
        <Image
          key={index}
          src={image.imageSizes.medium}
          alt={image.metaData.altText}
          title={image.metaData.title}
          width={index === 0 ? 752 : 292}
          height={index === 0 ? 540 : 266}
          className={styles.image}
        />
      ))}
      <Button
        theme="base"
        intent="inverted"
        size="small"
        onClick={() => setLightboxIsOpen(true)}
        className={styles.seeAllButton}
      >
        {intl.formatMessage({ id: "See all photos" })}
      </Button>
      <Lightbox
        images={images}
        dialogTitle={intl.formatMessage(
          { id: "Image gallery" },
          { name: hotelName }
        )}
        isOpen={lightboxIsOpen}
        onClose={() => setLightboxIsOpen(false)}
      />
    </div>
  )
}
