// // import React from 'react'

// // const Gallery = () => {
// //     const [currentIndex, setCurrentIndex] = useState(0);
// //   const [barIndex, setBarIndex] = useState(0);
// //   const handleThumbnailClick = (index) => {
// //     setCurrentIndex(index);
// //     setBarIndex(index % 8);
// //   };
// //   const handleNext = () => {
// //     const nextIndex = (currentIndex + 1) % imgData.length;
// //     const nextBarIndex = (barIndex + 1) % 8;
// //     setCurrentIndex(nextIndex);
// //     setBarIndex(nextBarIndex);
// //   };
// //   const handlePrev = () => {
// //     const prevIndex = (currentIndex - 1 + imgData.length) % imgData.length;
// //     const prevBarIndex = (barIndex - 1 + 8) % 8;
// //     setCurrentIndex(prevIndex);
// //     setBarIndex(prevBarIndex);
// //   };
// //     const imgData = ['/images/galleryImages/p3.jpg', '/images/galleryImages/p4.jpg', '/images/galleryImages/p3.jpg', '/images/galleryImages/p2.jpg'];
// //   return (
// //     <div>
// //       <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 lg:grid-cols-10 gap-4 my-[15px] px-2  h-auto">
// //         {imgData.map((img, idx) => (
// //           <div
// //             key={idx}
// //             className="w-full h-auto cursor-pointer flex py-[20px] justify-center"
// //             onClick={() => handleThumbnailClick(idx)}
// //           >
// //             <div className="relative w-full max-w-[103px] aspect-[103/94]">
// //               <img
// //                 src={img}
// //                 alt={`Thumbnail ${idx + 1}`}
// //                 className="rounded-lg w-full h-full object-cover"
// //               />
// //               {/* Light black overlay */}
// //               <div className="absolute inset-0 bg-black/20 rounded-lg" />
// //             </div>
// //           </div>
// //         ))}
// //       </div>
// //       {/* Sliders */}
// //       <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
// //         {/* Slider 1 */}
// //         <div className="w-full">
// //           <Slider {...settings}>
// //             <div className="w-full  aspect-[583/610] rounded-xl overflow-hidden">
// //               <img
// //                 src={imgData[currentIndex]}
// //                 alt="Slider 1"
// //                 className="w-full h-full object-cover select-none rounded-xl"
// //                 draggable={false}
// //               />
// //             </div>
// //           </Slider>
// //         </div>
// //         {/* Slider 2 */}
// //         <div className="w-full">
// //           <Slider {...settings}>
// //             <div className="w-full aspect-[583/610] rounded-xl overflow-hidden">
// //               <img
// //                 src={imgData[(currentIndex + 1) % imgData.length]}
// //                 alt="Slider 2"
// //                 className="w-full h-full object-cover select-none rounded-xl"
// //                 draggable={false}
// //               />
// //             </div>
// //           </Slider>
// //         </div>
// //       </div>
// //       {/* Arrows with Bars */}
// //       <div className="flex items-center justify-center gap-4 mt-6">
// //         {/* Left Arrow */}
// //         <button
// //           onClick={handlePrev}
// //           className="group w-[48px] h-[48px] sm:w-[58px] sm:h-[58px] border-2 border-grayCustom rounded-full flex items-center justify-center transition hover:bg-primary hover:border-primary active:bg-primary active:border-primary"
// //         >
// //           <img
// //             src={rightArrow}
// //             alt=""
// //             className="w-[30px] h-[30px]  group-hover:text-white group-active:text-white transition"
// //           />
// //         </button>
// //         {/* Bars */}
// //         <div className="flex gap-[4px] w-[140px] h-[5px] items-center justify-center">
// //           {Array.from({ length: 8 }).map((_, idx) => (
// //             <div
// //               key={idx}
// //               className={`w-[17.5px] h-[5px] rounded-md ${
// //                 idx === barIndex ? "bg-primary" : "bg-grayBars"
// //               }`}
// //             />
// //           ))}
// //         </div>
// //         {/* Right Arrow */}
// //         <button
// //           onClick={handleNext}
// //           className="group w-[48px] h-[48px] sm:w-[58px] sm:h-[58px] border-2 border-grayCustom rounded-full flex items-center justify-center transition hover:bg-primary hover:border-primary active:bg-primary active:border-primary"
// //         >
// //           <img
// //             src={leftArrow}
// //             alt=""
// //             className="w-[30px] h-[30px]  group-hover:text-white group-active:text-white transition"
// //           />{" "}
// //         </button>
// //       </div>
// //       </div>
// //   )
// // }

// // export default Gallery

// "use client";

// import React, { useState } from "react";
// import { Button } from "@/components/ui/button";
// import { Carousel, CarouselContent, CarouselItem } from "@/components/ui/carousel";
// import Autoplay from "embla-carousel-autoplay";
// import Image from "next/image";

// const Gallery = () => {
//   const imgData = [
//     "/images/galleryImages/p3.jpg",
//     "/images/galleryImages/p4.jpg",
//     "/images/galleryImages/p3.jpg",
//     "/images/galleryImages/p2.jpg",
//   ];

//   const [currentIndex, setCurrentIndex] = useState(0);

//   const handleThumbnailClick = (index) => {
//     setCurrentIndex(index);
//   };

//   return (
//     <div className="space-y-6">
//       {/* Thumbnails */}
//       <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 lg:grid-cols-10 gap-4 my-[15px] px-2">
//         {imgData.map((img, idx) => (
//           <div
//             key={idx}
//             onClick={() => handleThumbnailClick(idx)}
//             className="cursor-pointer"
//           >
//             <div className="relative w-full max-w-[103px] aspect-[103/94]">
//               <Image
//                 src={img}
//                 alt={`Thumbnail ${idx + 1}`}
//                 fill
//                 className="rounded-lg object-cover"
//               />
//               <div className="absolute inset-0 bg-black/20 rounded-lg" />
//             </div>
//           </div>
//         ))}
//       </div>

//       {/* Sliders using ShadCN Carousel */}
//       <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
//         {[0, 1].map((offset) => (
//           <Carousel
//             className="w-full aspect-[583/610]"
//           >
//             <CarouselContent>
//               <CarouselItem>
//                 <div className="w-full h-full rounded-xl overflow-hidden relative">
//                   <Image
//                     src={imgData[(currentIndex + offset) % imgData.length]}
//                     alt={`Slide ${offset + 1}`}
//                     width={500}
//                     height={500}
//                     className="object-cover rounded-xl select-none"
//                   />
//                 </div>
//               </CarouselItem>
//             </CarouselContent>
//           </Carousel>
//         ))}
//       </div>

//       {/* Navigation */}
//       <div className="flex items-center justify-center gap-4 mt-6">
//         <Button
//           variant="outline"
//           size="icon"
//           onClick={() =>
//             setCurrentIndex((prev) => (prev - 1 + imgData.length) % imgData.length)
//           }
//         >
//           ←
//         </Button>

//         <div className="flex gap-[4px] w-[140px] h-[5px] items-center justify-center">
//           {Array.from({ length: 8 }).map((_, idx) => (
//             <div
//               key={idx}
//               className={`w-[17.5px] h-[5px] rounded-md ${
//                 idx === currentIndex % 8 ? "bg-primary" : "bg-gray-300"
//               }`}
//             />
//           ))}
//         </div>

//         <Button
//           variant="outline"
//           size="icon"
//           onClick={() => setCurrentIndex((prev) => (prev + 1) % imgData.length)}
//         >
//           →
//         </Button>
//       </div>
//     </div>
//   );
// };

// export default Gallery;

// "use client";

// import React, { useState } from "react";
// import Autoplay from "embla-carousel-autoplay";
// import Image from "next/image";
// import { Button } from "@/components/ui/button";
// import {
//   Carousel,
//   CarouselContent,
//   CarouselItem,
// } from "@/components/ui/carousel";

// const Gallery = () => {
//   const images = [
//     "/images/galleryImages/p2.jpg",
//     // "/images/galleryImages/p3.jpg",
//     "/images/galleryImages/p4.jpg",
//     "/images/galleryImages/p1.jpg",
//   ];

//   const [currentIndex, setCurrentIndex] = useState(0);

//   const handleThumbnailClick = (index) => {
//     setCurrentIndex(index);
//   };

//   return (
//     <div className="space-y-10 px-4 md:px-10">
//       {/* Thumbnail grid */}
//       <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-4">
//         {images.map((img, idx) => (
//           <div
//             key={idx}
//             onClick={() => handleThumbnailClick(idx)}
//             className="cursor-pointer group"
//           >
//             <div className="relative w-full aspect-[4/3] overflow-hidden rounded-lg">
//               <Image
//                 src={img}
//                 alt={`Thumbnail ${idx + 1}`}
//                 fill
//                 className="object-cover transition-transform group-hover:scale-105 rounded-lg"
//               />
//               <div className="absolute inset-0 bg-black/20 rounded-lg" />
//             </div>
//           </div>
//         ))}
//       </div>

//       {/* Main Carousel */}
//       <div className="w-full max-w-4xl mx-auto">
//         <Carousel
//           opts={{ align: "center", loop: true }}
//           plugins={[Autoplay({ delay: 3000 })]}
//           className="w-full "
//         >
//           <CarouselContent>
//             <div className="grid grid-cols-2 h-full ">

//             <CarouselItem>
//               <div className="relative w-full h-full aspect-[16/9]">
//                 {/* <Image
//                   src={images[currentIndex]}
//                   alt={`Slide ${currentIndex + 1}`}
//                   fill
//                   className="object-cover rounded-xl "
//                 /> */}
//                 fff
//               </div>
//             </CarouselItem>
//              </div>
//           </CarouselContent>
//         </Carousel>
//       </div>

//       {/* Navigation controls */}
//       <div className="flex items-center justify-center gap-4">
//         <Button
//           variant="outline"
//           size="icon"
//           onClick={() =>
//             setCurrentIndex((prev) => (prev - 1 + images.length) % images.length)
//           }
//         >
//           ←
//         </Button>
//         <div className="flex gap-1">
//           {images.map((_, idx) => (
//             <div
//               key={idx}
//               className={`w-4 h-1.5 rounded-full ${
//                 idx === currentIndex ? "bg-primary" : "bg-gray-300"
//               }`}
//             />
//           ))}
//         </div>
//         <Button
//           variant="outline"
//           size="icon"
//           onClick={() => setCurrentIndex((prev) => (prev + 1) % images.length)}
//         >
//           →
//         </Button>
//       </div>
//     </div>
//   );
// };

// export default Gallery;

// "use client";

// import React, { useState } from "react";
// import Autoplay from "embla-carousel-autoplay";
// import Image from "next/image";
// import { Button } from "@/components/ui/button";
// import {
//   Carousel,
//   CarouselContent,
//   CarouselItem,
// } from "@/components/ui/carousel";

// const Gallery = () => {
//   const images = [
//     "/images/galleryImages/p1.jpg",
//     "/images/galleryImages/p2.jpg",
//     "/images/galleryImages/p4.jpg",
//   ];

//   const [currentIndex, setCurrentIndex] = useState(0);

//   const handleThumbnailClick = (index   ) => {
//     setCurrentIndex(index);
//   };

//   const handlePrev = () => {
//     setCurrentIndex((prev) => (prev - 1 + images.length) % images.length);
//   };

//   const handleNext = () => {
//     setCurrentIndex((prev) => (prev + 1) % images.length);
//   };

//   return (
//     <div className="space-y-10 px-4 md:px-10">
//       {/* Thumbnails */}
//       <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-4">
//         {images.map((img, idx) => (
//           <div
//             key={idx}
//             onClick={() => handleThumbnailClick(idx)}
//             className="cursor-pointer group"
//           >
//             <div className="relative w-full aspect-[4/3] overflow-hidden rounded-lg">
//               <Image
//                 src={img}
//                 alt={`Thumbnail ${idx + 1}`}
//                 fill
//                 className="object-cover transition-transform group-hover:scale-105 rounded-lg"
//               />
//               <div className="absolute inset-0 bg-black/20 rounded-lg" />
//             </div>
//           </div>
//         ))}
//       </div>

//       {/* Main Image Carousel */}
//       <div className="w-full max-w-4xl mx-auto">
//         <Carousel
//           opts={{ align: "center", loop: true }}
//           plugins={[Autoplay({ delay: 4000, stopOnInteraction: false })]}
//           className="w-full"
//         >
//           <CarouselContent>
//             <CarouselItem>
//               <div className="relative w-full aspect-[16/9] overflow-hidden rounded-xl">
//                 <Image
//                   src={images[currentIndex]}
//                   alt={`Slide ${currentIndex + 1}`}
//                   fill
//                   className="object-cover"
//                 />
//               </div>
//             </CarouselItem>
//           </CarouselContent>
//         </Carousel>
//       </div>

//       {/* Navigation */}
//       <div className="flex items-center justify-center gap-4">
//         <Button variant="outline" size="icon" onClick={handlePrev}>
//           ←
//         </Button>
//         <div className="flex gap-1">
//           {images.map((_, idx) => (
//             <div
//               key={idx}
//               className={`w-4 h-1.5 rounded-full ${
//                 idx === currentIndex ? "bg-primary" : "bg-gray-300"
//               }`}
//             />
//           ))}
//         </div>
//         <Button variant="outline" size="icon" onClick={handleNext}>
//           →
//         </Button>
//       </div>
//     </div>
//   );
// };

// export default Gallery;

// "use client";

// import React, { useState } from "react";
// import Autoplay from "embla-carousel-autoplay";
// import Image from "next/image";
// import { Button } from "@/components/ui/button";
// import {
//   Carousel,
//   CarouselContent,
//   CarouselItem,
// } from "@/components/ui/carousel";

// const Gallery = () => {
//   const images = [
//     "/images/galleryImages/p1.jpg",
//     "/images/galleryImages/p2.jpg",
//     "/images/galleryImages/p3.jpg",
//     "/images/galleryImages/p4.jpg",
//     // "/images/galleryImages/p5.jpg",
//   ];

//   const [currentIndex, setCurrentIndex] = useState(0);

//   const handleThumbnailClick = (index) => {
//     setCurrentIndex(index);
//   };

//   const chunkArray = (arr, chunkSize) => {
//     const chunks = [];
//     for (let i = 0; i < arr.length; i += chunkSize) {
//       chunks.push(arr.slice(i, i + chunkSize));
//     }
//     return chunks;
//   };

//   const chunkedImages = chunkArray(images, 2); // 2 images per slide

//   return (
//     <div className="space-y-10 px-4 md:px-10">
//       {/* Thumbnail Grid */}
//       <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-4">
//         {images.map((img, idx) => (
//           <div
//             key={idx}
//             onClick={() => handleThumbnailClick(idx)}
//             className="cursor-pointer group"
//           >
//             <div className="relative w-full aspect-[4/3] overflow-hidden rounded-lg">
//               <Image
//                 src={img}
//                 alt={`Thumbnail ${idx + 1}`}
//                 fill
//                 className="object-cover transition-transform group-hover:scale-105 rounded-lg"
//               />
//               <div className="absolute inset-0 bg-black/20 rounded-lg" />
//             </div>
//           </div>
//         ))}
//       </div>

//       {/* Main Carousel */}
//       <div className="w-full max-w-4xl mx-auto">
//         <Carousel
//           opts={{ align: "start", loop: true }}
//           plugins={[Autoplay({ delay: 3000 })]}
//           className="w-full"
//         >
//           <CarouselContent>
//             {chunkedImages.map((group, slideIdx) => (
//               <CarouselItem key={slideIdx}>
//                 <div className="grid grid-cols-2 gap-4">
//                   {group.map((img, idx) => (
//                     <div key={idx} className="relative aspect-[16/9] w-full">
//                       <Image
//                         src={img}
//                         alt={`Slide ${idx}`}
//                         fill
//                         className="object-cover rounded-xl"
//                       />
//                     </div>
//                   ))}
//                 </div>
//               </CarouselItem>
//             ))}
//           </CarouselContent>
//         </Carousel>
//       </div>

//       {/* Navigation Controls */}
//       <div className="flex items-center justify-center gap-4">
//         <Button
//           variant="outline"
//           size="icon"
//           onClick={() =>
//             setCurrentIndex((prev) => (prev - 1 + images.length) % images.length)
//           }
//         >
//           ←
//         </Button>
//         <div className="flex gap-1">
//           {images.map((_, idx) => (
//             <div
//               key={idx}
//               className={`w-4 h-1.5 rounded-full ${
//                 idx === currentIndex ? "bg-primary" : "bg-gray-300"
//               }`}
//             />
//           ))}
//         </div>
//         <Button
//           variant="outline"
//           size="icon"
//           onClick={() => setCurrentIndex((prev) => (prev + 1) % images.length)}
//         >
//           →
//         </Button>
//       </div>
//     </div>
//   );
// };

// export default Gallery;

"use client";

import React, { useCallback, useEffect, useRef, useState } from "react";
import Autoplay from "embla-carousel-autoplay";
import Image from "next/image";
import { Button } from "@/components/ui/button";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
} from "@/components/ui/carousel";
import { ReactComponent as ArrowIcon } from "@/public/icons/Vector (Stroke).svg";
import { Dialog, DialogContent } from "@/components/ui/dialog";
import { DialogTrigger } from "@radix-ui/react-dialog";
import { useTranslation } from "react-i18next";

const Gallery = ({ property }) => {
  const { t }= useTranslation("propertyDetail")
  const images = [
    "/images/galleryImages/p1.jpg",
    "/images/galleryImages/p2.jpg",
    "/images/galleryImages/p3.jpg",
    "/images/galleryImages/p4.jpg",
    "/images/galleryImages/p1.jpg",
    "/images/galleryImages/p2.jpg",
    "/images/galleryImages/p3.jpg",
    "/images/galleryImages/p4.jpg",
    "/images/galleryImages/p1.jpg",
    "/images/galleryImages/p2.jpg",
    "/images/galleryImages/p3.jpg",
    "/images/galleryImages/p4.jpg",
  ];

  const [open, setOpen] = useState(false);
  const [currentIndex, setCurrentIndex] = useState(0);
  const [selectedVideo, setSelectedVideo] = useState(null);

  const handleThumbnailClick = (index) => {
    setCurrentIndex(index);
    setOpen(true);
  };

  const handleNext = () => {
    setCurrentIndex((prev) => (prev + 1) % property?.images?.length);
  };

  const handlePrev = () => {
    setCurrentIndex(
      (prev) => (prev - 1 + property?.images?.length) % property?.images?.length
    );
  };

  return (
    <div className=" mt-6 lg:mt-10">
      {/* Thumbnail Grid */}
      {/* <div className="flex gap-4 hide-scrollbar overflow-x-auto ">
        {images.map((img, idx) => (
          <div
            key={idx}
            onClick={() => handleThumbnailClick(idx)}
            className="cursor-pointer group"
          >
            <div className="relative w-[103px] h-[95px] overflow-hidden rounded-lg">
              <Image
                src={img}
                alt={`Thumbnail ${idx + 1}`}
                fill
                className="object-cover transition-transform group-hover:scale-105 rounded-lg"
              />
              <div className="absolute inset-0 bg-black/20 rounded-lg" />
            </div>
          </div>
        ))}
      </div> */}
      <>
        <div className="flex gap-4 hide-scrollbar overflow-x-auto">
          {property?.images.map((img, idx) => (
            <div
              key={idx}
              onClick={() => handleThumbnailClick(idx)}
              className="cursor-pointer group"
            >
              <div className="relative w-[70px] h-[60px] sm:w-[80px] sm:h-[70px] md:w-[103px] md:h-[95px] overflow-hidden rounded-lg">
                <Image
                src={img?.url}
                alt={`Thumbnail ${idx + 1}`}
                fill
                className="object-cover transition-transform group-hover:scale-105 rounded-lg"
              />
                <div className="absolute inset-0 bg-black/20 rounded-lg" />
              </div>
            </div>
          ))}
        </div>

        <Dialog open={open} onOpenChange={setOpen}>
          <DialogContent className="max-w-[90vw] min-w-[80%] max-h-[90vh] pb-5 pt-10 px-5 flex flex-col items-center justify-center">
            <div className="relative w-full  h-[70vh] overflow-hidden rounded-lg">
              <Image
                src={property?.images[currentIndex]?.url}
                alt={`Image ${currentIndex + 1}`}
                fill
                className="object-cover rounded-2xl"
              />
            </div>
            <div className=" flex gap-4">
              <Button
                className="w-[100px] h-[35px] md:h-[40px] lg:h-[50px]"
                onClick={handlePrev}
              >
                Previous
              </Button>
              <Button
                className="w-[100px] h-[35px] md:h-[40px] lg:h-[50px]"
                onClick={handleNext}
              >
                Next
              </Button>
            </div>
          </DialogContent>
        </Dialog>
      </>

      {/* <div className="w-full mx-auto">
        <Carousel
          opts={{ align: "start", loop: true }}
          plugins={[Autoplay({ delay: 10000 })]}
          setApi={setEmblaApi}
        >
          <CarouselContent>
            {chunkedImages.map((group, slideIdx) => (
              <CarouselItem key={slideIdx}>
                <div className="grid grid-cols-2 gap-4 w-full">
                  {group.map((img, idx) => (
                    <div key={idx} className="relative aspect-[100/76] w-full">
                      <Image
                        src={img}
                        alt={`Slide ${idx}`}
                        fill
                        className="object-cover rounded-xl"
                      />
                    </div>
                  ))}
                </div>
              </CarouselItem>
            ))}
          </CarouselContent>
        </Carousel>
      </div>

      <div className="flex items-center justify-center gap-4">
        <button
          onClick={scrollPrev}
          className={`w-10 h-10 rounded-full flex items-center justify-center transition
     bg-gray-300 hover:bg-primary`}
       
        >
          <Image
            src="/icons/Vector (Stroke).svg"
            className={`w-4 h-4 rotate-180 text-gray-600 hover:text-white`}
           
            alt="sadu-logo"
            width={16}
            height={16}
          />
        </button>

        <div className="flex gap-1">
          {chunkedImages.map((_, idx) => (
            <div
              key={idx}
              className={`w-4 h-1.5 rounded-full transition-all duration-300  ${
                idx === currentIndex ? "bg-primary" : "bg-gray-300"
              }`}
            />
          ))}
        </div>

        <button
          onClick={scrollNext}
          className={`w-10 h-10 rounded-full flex items-center justify-center transition bg-gray-300 hover:bg-primary
     `}
        >
          <Image
            src="/icons/Vector (Stroke).svg"
            width={16}
            height={16}
            className={`w-4 h-4 text-gray-600 hover:text-white`}
          
          />
        </button>
      </div> */}
      {/* <div className="w-full mb-4 lg:mb-5 mt-6 lg:mt-10 grid grid-cols-1 lg:grid-cols-[40%_60%] gap-[10px]  pr-[10px]">
        <div className="h-[250px] md:h-[300px] lg:h-[500px] w-full">
          <img
            src={property?.images[0]?.url}
            alt="Main"
            className="w-full h-full object-cover rounded-lg"
          />
        </div>
        <div className="w-full grid grid-cols-2 gap-[10px]">
          <div className="space-y-[13px]  h-[300px] sm:h-[350px]  md:h-[400px] lg:h-[500px] w-full">
            <div className="relative w-full h-[calc(50%-6.5px)]">
              <img
                src={property?.images[1]?.url}
                alt="img2"
                className="rounded-lg w-full h-full object-cover"
              />
              <div className="absolute inset-0 rounded-lg" />
            </div>
            <div className="relative w-full h-[calc(50%-6.5px)]">
              <img
                src={property?.images[2]?.url}
                alt="img3"
                className="rounded-lg w-full h-full object-cover"
              />
              <div className="absolute inset-0 rounded-lg" />
            </div>
          </div>
          <div className="space-y-[13px] h-[300px] sm:h-[350px]  md:h-[400px] lg:h-[500px] w-full">
            <div className="relative w-full h-[calc(50%-6.5px)]">
              <img
                src={property?.images[3]?.url}
                alt="img3"
                className="rounded-lg w-full h-full object-cover"
              />
              <div className="absolute inset-0 rounded-lg" />
            </div>
            <div className="relative w-full h-[calc(50%-6.5px)]">
              <img
                src={property?.images[4]?.url}
                alt="img2"
                className="rounded-lg w-full h-full object-cover"
              />
              <div className="absolute inset-0 rounded-lg" />
            </div>
          </div>
        </div>
      </div> */}
      <div className="w-full mb-4 lg:mb-5 mt-6 lg:mt-10 grid grid-cols-1 lg:grid-cols-[40%_60%] gap-[10px] pr-[10px]">
  {/* Left/Main Image */}
  {property?.images?.[0] && (
    <div className="h-[250px] md:h-[300px] lg:h-[500px] w-full">
      <img
        src={property.images[0].url}
        alt="Main"
        className="w-full h-full object-cover rounded-lg"
      />
    </div>
  )}

  {/* Right Side Grid */}
  {property?.images?.length > 1 && (
    <div className="w-full grid grid-cols-2 gap-[10px]">
      {[1, 2, 3, 4].map((index) => {
        const image = property?.images?.[index];
        return (
          image && (
            <div
              key={index}
              className="relative w-full h-[calc(50%-6.5px)] rounded-lg overflow-hidden"
            >
              <img
                src={image.url}
                alt={`Property image ${index + 1}`}
                className="w-full h-full object-cover rounded-lg"
              />
              <div className="absolute inset-0 rounded-lg" />
            </div>
          )
        );
      })}
    </div>
  )}
</div>

      <div className="w-full">
        <h2 className="text-xl font-semibold mb-4">{t("Videos")}</h2>

        {/* Horizontal Scrollable List */}
        <div className="flex gap-4 overflow-x-auto pb-2">
          {property?.videos?.map((video) => (
            <Dialog key={video.id}>
              <DialogTrigger asChild>
                <div
                  onClick={() => setSelectedVideo(video.url)}
                  className="min-w-[200px] h-[200px] bg-gray-200 rounded-lg flex flex-col items-center justify-center cursor-pointer hover:scale-105 transition p-2"
                >
                  {/* Video Icon in the center */}
                  <Image
                    src="/icons/play-button-arrowhead.png"
                    height={60}
                    width={60}
                    alt="play icon"
                  />

                  {/* Video URL below */}
                  <p className="text-center text-xs text-gray-600 break-all max-w-[80%] pt-3">
                    {video.url}
                  </p>
                </div>
              </DialogTrigger>

              {/* Modal */}
              <DialogContent className="sm:max-w-[80%] w-[100%]">
                {selectedVideo && (
                  <div className="relative w-full h-[500px]">
                    <iframe
                      className="w-full h-full rounded-lg"
                      src={selectedVideo.replace(
                        "youtu.be/",
                        "www.youtube.com/embed/"
                      )}
                      title="YouTube Video"
                      frameBorder="0"
                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                      allowFullScreen
                    ></iframe>
                  </div>
                )}
              </DialogContent>
            </Dialog>
          ))}
        </div>
      </div>
    </div>
  );
};

export default Gallery;
