{"version":3,"file":"static/chunks/8485.363145a28a6a37e7.js","mappings":"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","sources":["webpack://_N_E/./components/TourPage/PhotosHeader.tsx","webpack://_N_E/<anon>"],"sourcesContent":["import React, { useState } from 'react';\nimport Image from 'next/image';\nimport styled from 'styled-components';\nimport {\n  optimizeImageUrl,\n  optimizeVideoUrl\n} from '../../utils/videoLinkOptimize';\nimport { useMediaQuery } from '../../hooks/mediaQuery';\nimport { useRouter } from 'next/router';\nimport { Swiper, SwiperSlide } from 'swiper/react';\nimport SwiperCore, { Navigation } from 'swiper';\nimport 'swiper/css';\nimport 'swiper/css/navigation';\nimport 'swiper/css/pagination';\nSwiperCore.use([Navigation]);\n\nconst StyledVideo = styled.video``;\n\ninterface GalleryProps {\n  media: {\n    url: string;\n    alt: string;\n    name: string;\n  }[];\n  productName?: string;\n  productSlug?: string;\n  cardMessage?: string;\n}\n\nconst PhotosHeader = ({\n  media,\n  productName,\n  productSlug,\n  cardMessage\n}: GalleryProps) => {\n  const mediaQuery = useMediaQuery(640);\n  const router = useRouter();\n  const handleShowAllClick = () => {\n    router.push(`/tours/tour-gallery?slug=${productSlug}`);\n  };\n  const handleImageClick = (index: number) => {\n    router.push(`/tours/tour-gallery?slug=${productSlug}&index=${index}`);\n  };\n  const [isHoveredShowAll, setIsHoveredShowAll] = useState(false);\n  const [isHoveredPhotos, setIsHoveredPhotos] = useState(false);\n  const handleMouseEnterShowAll = () => setIsHoveredShowAll(true);\n  const handleMouseLeaveShowAll = () => setIsHoveredShowAll(false);\n\n  const handleMouseEnterPhotos = () => setIsHoveredPhotos(true);\n  const handleMouseLeavePhotos = () => setIsHoveredPhotos(false);\n\n  return (\n    <>\n      <div className=\"relative hidden mmd:flex w-full mx-auto\">\n        {cardMessage && cardMessage === 'AWARD WINNER!' && (\n          <div className=\"absolute z-30 max-w-[300px] lg:max-w-[250px] py-2.5 px-2.5 md:top-2 md:left-2 xl:top-4 xl:left-4\">\n            <Image\n              src=\"/award-winner.png\"\n              width={100}\n              height={100}\n              quality={100}\n              alt=\"award-winner-logo\"\n              className=\"w-[70px] h-[76px] xl:w-[90px] xl:h-[106px]\"\n            />\n          </div>\n        )}\n\n        <div\n          onClick={handleShowAllClick}\n          className=\"absolute bottom-[-22px] right-0 flex justify-center items-center z-10\"\n        >\n          <button className=\"flex text-[#333] items-center gap-2 w-[296px] h-[50px] bg-white font-semibold rounded-full shadow-lg border border-gray-300 hover:shadow-xl transition\">\n            <div\n              onMouseEnter={handleMouseEnterPhotos}\n              onMouseLeave={handleMouseLeavePhotos}\n              className=\"flex w-[50%] justify-center border-r border-r-[#A3ABBA]\"\n            >\n              <Image\n                src={\n                  isHoveredPhotos\n                    ? '/hovered-photo-gallery.svg'\n                    : '/photo-gallery.svg'\n                }\n                width={24}\n                height={24}\n                alt=\"local\"\n                className=\"mr-2\"\n              />{' '}\n              <span\n                className={` ${\n                  isHoveredPhotos\n                    ? 'text-primary font-black underline'\n                    : 'text-[#333]'\n                }`}\n              >{`${media?.length} photos`}</span>\n            </div>\n            <div\n              onMouseEnter={handleMouseEnterShowAll}\n              onMouseLeave={handleMouseLeaveShowAll}\n              className=\"flex gap-2 w-[50%]\"\n            >\n              {' '}\n              <Image\n                src={isHoveredShowAll ? '/hoveredShowAll.svg' : '/showAll.svg'}\n                width={24}\n                height={24}\n                alt=\"show all icon\"\n              />{' '}\n              <span\n                className={` ${\n                  isHoveredShowAll\n                    ? 'text-primary font-black underline'\n                    : 'text-[#333]'\n                } `}\n              >\n                Show All\n              </span>{' '}\n            </div>\n          </button>\n        </div>\n        <div className=\"h-[420px] relative w-full\">\n          <div className=\"grid grid-cols-2 gap-2\">\n            <div\n              className=\"w-full h-[420px] cursor-pointer\"\n              onClick={() => handleImageClick(0)}\n            >\n              {media?.length > 0 &&\n                media[0] &&\n                (media[0].url.includes('jpg') ||\n                media[0].url.includes('png') ? (\n                  <Image\n                    src={optimizeImageUrl(media[0].url)}\n                    alt={media[0].alt || `${productName} image 1`}\n                    quality={60}\n                    fetchPriority=\"high\"\n                    width={600}\n                    height={420}\n                    loading=\"eager\"\n                    decoding=\"async\"\n                    className=\"h-[420px] object-cover w-full rounded-[8px]\"\n                    placeholder=\"blur\"\n                    blurDataURL=\"/placeholder.webp\"\n                    priority={true}\n                  />\n                ) : (\n                  <StyledVideo\n                    playsInline\n                    autoPlay={!mediaQuery}\n                    controls={mediaQuery}\n                    muted\n                    loop={!mediaQuery}\n                    className=\"h-[420px] w-full object-cover rounded-[8px]\"\n                    src={optimizeVideoUrl(media[0]?.url)}\n                    onClick={e => e.preventDefault()}\n                  />\n                ))}\n            </div>\n\n            <div className=\"w-full h-[420px] grid grid-cols-2 grid-rows-2 gap-2\">\n              {media?.slice(1, 5).map((mediaItem, index) => (\n                <div\n                  key={mediaItem.url}\n                  onClick={() => handleImageClick(index + 1)}\n                  className=\"cursor-pointer\"\n                >\n                  {mediaItem.url.includes('jpg') ||\n                  mediaItem.url.includes('png') ? (\n                    <Image\n                      src={optimizeImageUrl(mediaItem.url)}\n                      alt={mediaItem.alt || `${productName} image ${index + 2}`}\n                      quality={70}\n                      width={300}\n                      height={210}\n                      className=\"h-[206px] object-cover w-full rounded-[8px]\"\n                      placeholder=\"blur\"\n                      blurDataURL=\"/placeholder.webp\"\n                      priority={index === 0}\n                    />\n                  ) : (\n                    <StyledVideo\n                      playsInline\n                      autoPlay={!mediaQuery}\n                      controls={mediaQuery}\n                      muted\n                      loop={!mediaQuery}\n                      className=\"h-[206px] w-full object-cover rounded-[8px]\"\n                      src={optimizeVideoUrl(mediaItem.url)}\n                      onClick={e => e.preventDefault()}\n                    />\n                  )}\n                </div>\n              ))}\n            </div>\n          </div>\n        </div>\n      </div>\n      <div className=\"relative mmd:hidden w-full\">\n        <div className=\"h-[300px] w-full\">\n          <Swiper\n            spaceBetween={10}\n            slidesPerView=\"auto\"\n            pagination={{\n              clickable: true\n            }}\n            breakpoints={{\n              320: { slidesPerView: 1 },\n              480: { slidesPerView: 2 },\n              640: { slidesPerView: 3 }\n            }}\n            className=\"h-full w-full\"\n          >\n            {media?.map((mediaItem, index) => (\n              <SwiperSlide key={mediaItem.url} className=\"h-full\">\n                {mediaItem.url.includes('jpg') ||\n                mediaItem.url.includes('png') ? (\n                  <Image\n                    src={optimizeImageUrl(mediaItem.url)}\n                    alt={mediaItem.alt || `${productName} image ${index + 1}`}\n                    quality={70}\n                    width={400}\n                    height={300}\n                    className=\"object-cover w-full h-full rounded-[8px]\"\n                    placeholder=\"blur\"\n                    blurDataURL=\"/placeholder.webp\"\n                    priority={index === 0}\n                  />\n                ) : (\n                  <StyledVideo\n                    playsInline\n                    autoPlay={!mediaQuery}\n                    controls={mediaQuery}\n                    muted\n                    loop={!mediaQuery}\n                    className=\"object-cover w-full h-full rounded-[8px]\"\n                    src={optimizeVideoUrl(mediaItem.url)}\n                    onClick={e => e.preventDefault()}\n                  />\n                )}\n              </SwiperSlide>\n            ))}\n          </Swiper>\n        </div>\n      </div>\n    </>\n  );\n};\n\nexport default PhotosHeader;\n"],"names":["SwiperCore","use","Navigation","StyledVideo","styled","video","withConfig","__webpack_exports__","media","productName","productSlug","cardMessage","param","mediaQuery","useMediaQuery","router","useRouter","handleImageClick","push","index","concat","isHoveredShowAll","setIsHoveredShowAll","useState","isHoveredPhotos","setIsHoveredPhotos","react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__","jsxs","Fragment","div","className","jsx","Image","src","width","height","quality","alt","onClick","button","onMouseEnter","onMouseLeave","span","length","url","includes","optimizeImageUrl","fetchPriority","loading","decoding","placeholder","blurDataURL","priority","playsInline","autoPlay","controls","muted","loop","optimizeVideoUrl","e","preventDefault","slice","map","mediaItem","Swiper","spaceBetween","slidesPerView","pagination","clickable","breakpoints","SwiperSlide"],"sourceRoot":""}