"use client"
import { Carousel } from "flowbite-react";
import { useEffect, useState, useRef } from "react";
import { formatRupiah } from "@/app/library/rupiah";
import Map from 'react-map-gl';
import { dataWilayah } from "@/app/library/loadJson";
import { DateLabel } from "@/app/library/dateLabel";
import useSWR, { SWRConfig } from 'swr'
import { useOutsideClick } from "@/app/library/outclick";
import { faTimes } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import Iframe from "react-iframe";
import StickyButton from "@/app/component/sticky";
import { LoaderJo } from "@/app/component/loader";
import IklanTerkait from "./iklanterkait";
import ShareButton from "./sharebutton";
import WaButton from "@/app/library/button/waButton";
import { useSession } from "next-auth/react";


const wilayah = dataWilayah();

String.prototype.capitalize = function () {
    // Memeriksa apakah string kosong
    if (this.length === 0) {
        return this;
    }

    // Memecah string menjadi array kata
    const words = this.split(' ');

    // Mengkapitalisasi setiap kata
    const capitalizedWords = words.map(word => {
        return word.charAt(0).toUpperCase() + word.slice(1);
    });
    // Menggabungkan kata-kata yang sudah di-kapitalisasi
    return capitalizedWords.join(' ');
}

const fetcher = (...args) => fetch(...args).then((res) => res.json())


export default function ProdukDetail(props) {
    const { data: session } = useSession();
    const [visible, setVisible] = useState()
    const ref = useOutsideClick(() => {
        setVisible(null)
    });
    const [avatar, SetAvatar] = useState([]);
    const [arrImage, SetArrImage] = useState([]);
    const [data, SetData] = useState({});
    const [youtube, setYoutube] = useState(null);
    const [maps, setMaps] = useState(null);
    const [tampilkanNumber, setTampilkanNumber] = useState(null);
    // [latitude,longitude]
    let log = new Date().toString();
    let tgllaku = new Date().toString();


    useEffect(() => {

        function ambilIdVideo(url) {
            var splitUrl = url.split("v=");
            if (splitUrl.length > 1) {
                var videoId = splitUrl[1];
                var ampersandPosition = videoId.indexOf('&');
                if (ampersandPosition !== -1) {
                    videoId = videoId.substring(0, ampersandPosition);
                }
                return videoId;
            } else {
                return "";
            }
        }

        function ambilIdDariYouTubeShort(url) {
            var idShort = null;
            var shortPattern = /\/shorts\/([a-zA-Z0-9_-]{11})/;
            var match = url.match(shortPattern);
            if (match !== null) {
                idShort = match[1];
            }
            return idShort;
        }

        function ambilKodeYouTube(link) {
            var kode = '';
            var url = new URL(link);
            if (url.hostname === 'youtu.be') {
                kode = url.pathname.slice(1);
                if (kode.includes('?')) {
                    kode = kode.substring(0, kode.indexOf('?'));
                }
            } else if (url.hostname === 'www.youtube.com' || url.hostname === 'youtube.com') {
                if (url.search) {
                    var params = new URLSearchParams(url.search);
                    kode = params.get('v');
                } else {
                    kode = url.pathname.slice(1);
                    if (kode === 'watch') {
                        kode = url.searchParams.get('v');
                    }
                }
            }
            return kode;
        }

        const loadData = async function () {
            const produk = props.data;
            console.log(produk)
                let dataArray;
                if(produk.length > 0){
                    dataArray = produk[0];
                }
                SetArrImage(produk);
                SetData(dataArray);
                let detectYoutube = dataArray.deskrisi.split(" ");
                detectYoutube.forEach(function (x) {
                    if (x.indexOf('youtube.com') != -1 && x.indexOf('youtube.com/shorts/') != -1) {
                        setYoutube(ambilIdDariYouTubeShort(x));
                    } else if (x.indexOf('youtube.com') != -1 || x.indexOf('youtu.be') != -1) {
                        if (ambilIdVideo(x) != '') {
                            setYoutube(ambilIdVideo(x));
                        } else {
                            setYoutube(ambilKodeYouTube(x));
                        }
                    }
                });
                const lat = (wilayah.getKecamatan(dataArray.kec) === null ? "" : wilayah.getKecamatan(dataArray.kec).lat);
                const long = (wilayah.getKecamatan(dataArray.kec) === null ? "" : wilayah.getKecamatan(dataArray.kec).long);
                const mapsRender = [lat, long];
                setMaps(mapsRender.join(","))
        }
        loadData();
    }, [setYoutube, props, SetAvatar]);

    const kec = (wilayah.getKecamatan(data.kec) === null ? "" : wilayah.getKecamatan(data.kec).nama);
    const kota = (wilayah.getKota(data.kota) === null ? "" : wilayah.getKota(data.kota).nama);
    const prov = (wilayah.getProvinsi(data.prov) === null ? "" : wilayah.getProvinsi(data.prov).nama);
    log = data.userlog;
    tgllaku = DateLabel(data.laku=='' ? tgllaku : data.tgllaku);
    console.log(tgllaku);
    return (<>
        <div className="flex justify-center items-center fixed w-[100vw] h-[100vh] top-0 left-0 z-[1500]" style={{ visibility: visible ? 'visible' : 'hidden', background: "rgba(0, 0, 0, 0.5)" }}>
            <div className="absolute rounded bg-white z-[9] cursor-pointer top-5 right-5 md:top-[40px] md:right-[40px]">
                <svg
                    viewBox="0 0 24 24"
                    fill="currentColor"
                    height="2em"
                    width="2em"
                >
                    <path d="M13.41 12l4.3-4.29a1 1 0 10-1.42-1.42L12 10.59l-4.29-4.3a1 1 0 00-1.42 1.42l4.3 4.29-4.3 4.29a1 1 0 000 1.42 1 1 0 001.42 0l4.29-4.3 4.29 4.3a1 1 0 001.42 0 1 1 0 000-1.42z" />
                </svg>
            </div>
            <div ref={ref} className="w-[100vw] h-[100vh] bg-white shadow-lg rounded">
                <Carousel className="h-[100%] bg-black">
                    {arrImage.map((s, i) => {
                        return (
                            <li key={i}>
                                <div className="flex justify-center items-center ">
                                    <div style={{ pointerEvents:'none',backgroundSize:'contain', backgroundPosition:'center center', backgroundRepeat:'no-repeat', backgroundColor:'black', backgroundImage: `url("https://app.rumahjo.com/${s.image}")` }} className="p-2 relative flex items-center  justify-center h-[100vh] w-[100vw] overflow-hidden">
                                        <label style={{fontWeight:'bold', color:`rgba(255,255,255,0.5)`, textShadow:`0 0 5px rgba(0,0,0,0.5)`}} className="text-3xl absolute">RUMAHJO</label>
                                    </div>
                                </div>
                            </li>
                        )
                    })}
                </Carousel>
            </div>
        </div>
        {data.approval=='0' ? 
        <>
        <div data-nosnippet="true" className="mt-[68px] md:mt-[25px] lg:mt-[25px]">            
            <div data-nosnippet="true" className="fixed w-screen h-screen bg-white/90" style={{zIndex:"99999"}}>
                <div data-nosnippet="true" className="absolute top-[40%] md:top-[42.5%] left-[50%] mr-[-50%]" style={{transform:"translate(-50%, -50%)"}}>
                    <div data-nosnippet="true" className="text-center">
                        <img data-nosnippet="true" width={"200"} src="/rumahjo-PNG.png"></img>
                        <h1 data-nosnippet="true" className="text-2xl primary underline">IKLAN INI TIDAK AKTIF</h1>
                    </div>
                </div>
            </div>
        </div>
        </>
         : 
        data.laku=='1'
        ?
        <div className="fixed w-screen h-screen bg-white/70 mt-7 md:mt-5" style={{zIndex:"99999"}}>
            <div className="absolute w-[50%] md:w-[30%] lg:w-[20%] flex items-center justify-center capitalize" style={{top:'40%',left:'50%',transform:'translate(-50%,-50%)'}}>
                <div className="flex flex-col justify-center items-center w-[100%] border-[3px] border-green-700 rounded-xl text-green-700 text-[20px]" style={{transform:"rotate(15deg) translateY(15px)",opacity:"0.8",backgroundColor:'rgba(255,255,255,.8)'}}>
                    <div className="text-[120%] font-bold">SOLD!</div>
                    <div className="h-[2px] w-[98%] bg-green-700"></div>
                    <div className="text-[75%]">{tgllaku}</div>
                    <div className="h-[2px] w-[98%] bg-green-700"></div>
                    <div className="text-[100%] font-bold text-[#c30000]">RUMAHJO.COM</div>
                </div>
            </div>
        </div>
        :
        <div></div>
        }
        <div className="grid px-0 lg:px-10 pt-[35px] lg:pt-[25px] grid-cols-3 gap-2">
            <div className="col-span-3 md:col-span-2 bg-white shadow-md md:mb-2 md:p-5 rounded-xm">
                {data.reg=='1'
                ?
                    <div>
                        <div className="absolute z-10 pl-2 pt-2">
                            <img className="w-[50px] md:w-[60px]" src="/3.png" style={{filter:"drop-shadow(2px 4px 8px hsla(0deg, 0%, 0%, 0.5))"}} />
                        </div>
                        <label className="hidden align-items-center px-[12px] flex items-center text-[#d50000] font-semibold bg-amber-500 text-[12px] mt-[18px] width-[96px]" style={{ height: "20px", justifyContent: "center", position: "absolute", textTransform: "uppercase", zIndex: "2", letterSpacing: ".5504px" }}>
                            <div className="premium my-[2px] mr-[8px] inline-block w-[12px] h-[12px] bg-[#d50000]"></div>
                            <span className="text-[12px] md:text-[14px]">Premium</span>
                        </label>
                    </div>
                :
                    <></>
                }
                {/* <label className="align-items-center px-[12px] flex text-black bg-yellow-300 text-[12px] mt-[24px] width-[96px]" style={{ fontWeight: "400", height: "20px", justifyContent: "center", position: "absolute", textTransform: "uppercase", zIndex: "2", letterSpacing: ".5504px" }}>
                    <img className="my-[2px] mr-[8px] width-[6px]" src="https://statics.olx.co.id/external/base/img/featured.png" alt="Featured" />
                    <span>Highlight</span>
                </label> */}
                <Carousel onClick={(index) => {
                    if (index.target.tagName == "DIV") {
                        let indexKey = index.target.dataset.key;
                        setVisible(index);
                    }
                }} className="h-[60vh] bg-black">
                    {arrImage.map((s, i) => {
                        return (
                            <li className="image-click"
                                key={i}>
                                <div
                                    onContextMenu={(e) => {
                                        e.preventDefault();
                                      }} 
                                    style={{ backgroundPosition:'center center', backgroundRepeat:'no-repeat', backgroundSize:'contain', backgroundImage: `url("https://app.rumahjo.com/` + s.image +`")`}} className="flex h-[60vh] justify-center items-center ">
                                    <label style={{fontWeight:'bold', color:`rgba(255,255,255,0.5)`, textShadow:`0 0 5px rgba(0,0,0,0.5)`}} className="text-2xl absolute">RUMAHJO</label>
                                </div>
                            </li>
                        )
                    })}
                </Carousel>
                <section className="mb-[8px] px-5 md:px-0">
                    <div className="py-[16px]">
                        <h3 className="text-[20px] font-bold text-gray-800">Detail</h3>
                        <div className="relative my-[16px]">
                            <div className="flex w-[100%] flex-wrap justify-between">
                                {data.slug2 === 'Dijual: Rumah & Apartement' && (
                                <div className="basis-[100%] md:basis-[50%]">
                                    <div className="flex mb-[8px] w-[100%] justify-between">
                                        <span className="max-w-[50%] text-gray-500">Tipe</span>
                                        <span className="basis-[50%] text-left text-gray-800">{(data.type === '1' ? 'Rumah' : 'Apartemen')}</span>
                                    </div>
                                </div>
                                )}
                                {data.slug2 === 'Disewakan: Rumah & Apartement' && (
                                <div className="basis-[100%] md:basis-[50%]">
                                    <div className="flex mb-[8px] w-[100%] justify-between">
                                        <span className="max-w-[50%] text-gray-500">Tipe</span>
                                        <span className="basis-[50%] text-left text-gray-800">{(data.type === '1' ? 'Rumah' : 'Apartemen')}</span>
                                    </div>
                                </div>
                                )}
                                {data.lbangun > '0' && (
                                <div className="basis-[100%] md:basis-[50%]">
                                    <div className="flex mb-[8px] w-[100%] justify-between">
                                        <span className="max-w-[50%] text-gray-500">Luas Bangunan</span>
                                        <span className="basis-[50%] text-left text-gray-800">{data.lbangun}</span>
                                    </div>
                                </div>
                                )}
                                {data.ltanah > '0' && (
                                <div className="basis-[100%] md:basis-[50%]">
                                    <div className="flex mb-[8px] w-[100%] justify-between">
                                        <span className="max-w-[50%] text-gray-500">Luas Tanah</span>
                                        <span className="basis-[50%] text-left text-gray-800">{data.ltanah}</span>
                                    </div>
                                </div>
                                )}
                                {data.ktidur > '0' && (
                                <div className="basis-[100%] md:basis-[50%]">
                                    <div className="flex mb-[8px] w-[100%] justify-between">
                                        <span className="max-w-[50%] text-gray-500">Kamar Tidur</span>
                                        <span className="basis-[50%] text-left text-gray-800">{data.ktidur}</span>
                                    </div>
                                </div>
                                )}
                                {data.kmandi > '0' && (
                                <div className="basis-[100%] md:basis-[50%]">
                                    <div className="flex mb-[8px] w-[100%] justify-between">
                                        <span className="max-w-[50%] text-gray-500">Kamar Mandi</span>
                                        <span className="basis-[50%] text-left text-gray-800">{data.kmandi}</span>
                                    </div>
                                </div>
                                )}
                                {data.hadap !== '' && (
                                <div className="basis-[100%] md:basis-[50%]">
                                    <div className="flex mb-[8px] w-[100%] justify-between">
                                        <span className="max-w-[50%] text-gray-500">Hadap</span>
                                        <span className="basis-[50%] text-left text-gray-800">{data.hadap ? data.hadap : "-"}</span>
                                    </div>
                                </div>
                                )}
                                {data.lantai > '0' && (
                                <div className="basis-[100%] md:basis-[50%]">
                                    <div className="flex mb-[8px] w-[100%] justify-between">
                                        <span className="max-w-[50%] text-gray-500">Lantai</span>
                                        <span className="basis-[50%] text-left text-gray-800">{data.lantai}</span>
                                    </div>
                                </div>
                                )}
                                {data.facility !== '' && (
                                <div className="basis-[100%]">
                                    <div className="flex mb-[8px] w-[100%] justify-between">
                                        <div className="basis-[50%] md:basis-[25%]">
                                            <span className="text-gray-500">Fasilitas</span>
                                        </div>
                                        <div className="flex basis-[50%] md:basis-[75%] flex-wrap" note="loop dari kolom facility atau tabel facility">

                                            {data.facility ? data.facility.split(',').map((d, i) => {
                                                return <span key={i} className="basis-[100%] md:basis-[33.33333%] text-left text-gray-800">{d}</span>
                                            }) : ""}

                                        </div>
                                    </div>
                                </div>
                                )}
                                {data.cert > '0' && (
                                <div className="basis-[100%] md:basis-[50%]">
                                    <div className="flex mb-[8px] w-[100%] justify-between">
                                        <span className="max-w-[50%] text-gray-500">Sertifikasi</span>
                                        <span className="basis-[50%] text-left text-gray-800">{(data.cert === 1 ? 'SHM - Sertifikat Hak Milik' : (data.cert === 2 ? 'HGB - Hak Guna Bangun' : 'Lainnya (PPJB, Girik, Adat, dll)'))}</span>
                                    </div>
                                </div>
                                )}
                                {data.alamat !== '' && (
                                <div className="basis-[100%] md:basis-[50%]">
                                    <div className="flex mb-[8px] w-[100%] justify-between">
                                        <span className="max-w-[50%] text-gray-500">Alamat Lokasi</span>
                                        <span className="basis-[50%] text-left text-gray-800">{data.alamat}</span>
                                    </div>
                                </div>
                                )}
                            </div>
                        </div>
                        <h3 className="text-[20px] font-bold text-gray-800 pt-[20px] border-t border-gray-400">Deskripsi</h3>
                        {
                            youtube ?
                                <iframe style={{width:"300px", height:'245px'}} src={`https://www.youtube.com/embed/` + youtube}>
                                </iframe>
                                : <></>
                        }
                        <div className="my-[16px] font-normal not-italic text-[14px] leading-[20px] text-gray-800" style={{ fontStretch: "normal", whiteSpace: "pre-line" }}>
                            {data.deskrisi}
                        </div>
                    </div>
                </section>
            </div>
            <div className="col-span-3 md:col-span-1">
                <div className=" rounded-sm md:rounded-md shadow-xl bg-white w-full max-w-full  md-w-[400px] px-5 py-3 ">
                    <div className="flex mb-[4px]" style={{ alignItems: "center", justifyContent: "space-between" }}>
                        <span className="flex text-[20px] md:text-[2rem] font-bold">{data.price != undefined ? formatRupiah(data.price) : "Rp 0"}</span>
                        <div className="flex">
                            <ShareButton data={props} />
                            {/* <button className="inline-flex w-[40px] h-[40px]" style={{ borderRadius: "50%", justifyContent: "center", alignItems: "center", cursor: "pointer" }}>
                                <svg className="w-[24px] h-[24px]" viewBox="0 0 1024 1024" fillRule="evenodd"><path d="M830.798 448.659l-318.798 389.915-317.828-388.693c-20.461-27.171-31.263-59.345-31.263-93.033 0-85.566 69.605-155.152 155.152-155.152 72.126 0 132.752 49.552 150.051 116.364h87.777c17.299-66.812 77.905-116.364 150.051-116.364 85.547 0 155.152 69.585 155.152 155.152 0 33.687-10.802 65.862-30.293 91.811zM705.939 124.121c-80.853 0-152.204 41.425-193.939 104.204-41.736-62.778-113.086-104.204-193.939-104.204-128.33 0-232.727 104.378-232.727 232.727 0 50.657 16.194 98.948 47.806 140.897l328.766 402.133h100.189l329.716-403.355c30.662-40.727 46.856-89.018 46.856-139.675 0-128.349-104.398-232.727-232.727-232.727z"></path></svg>
                            </button> */}
                        </div>
                    </div>
                    <span className="hidden md:block text-gray-800">{data.ktidur} KT - {data.kmandi} KM - {data.lbangun} m2</span>
                    <h1 className="block text-[14px] text-gray-500" style={{ fontWeight: "400", margin: "0 0 16px", lineHeight: "24px" }}>{data.judul != undefined ? data.judul.capitalize() : data.judul}</h1>
                    <div className="flex md:border-t-0 border-t border-gray-400 pt-[8px]" style={{ alignItems: "center", justifyContent: "space-between" }}>
                        <div className="text-[12px]">
                            <span className="text-ellipsis overflow-hidden text-gray-600 capitalize">{(kec == "" ? "" : kec.toLowerCase() + ", ") + (kota == "" ? "" : kota.toLowerCase() + ", ") + (prov == "" ? "" : prov.toLowerCase())}</span>
                        </div>
                        <div className="text-right min-w-[70px] text-[12px]">
                            <span className="text-gray-600">
                                {DateLabel(log)}
                            </span>
                        </div>
                    </div>
                </div>
                <div className="mt-2 md:mt-5 rounded-sm  md:rounded-md shadow-xl bg-white w-full  md-w-[400px] px-5 py-3 ">
                    <div className="flex flex-col">
                        <div className="flex w-[calc(100%-10px)] items-center">
                            <a href={"/profile/" + data.uid_user} className="relative">
                                <div style={{
                                    backgroundImage: 'url("' + (data.avatar ? data.avatar : `https://ui-avatars.com/api/?size=200&background=25D366&name=`+(data.fullname?data.fullname:'').split(' ').join('+'))+'")'
                                }} className={`relative overflow-hidden w-[70px] h-[70px] bg-[50%] bg-cover rounded-full m-0`}></div>
                            </a>
                            <div className="relative font-normal not-italic text-[14px] leading-[20px] basis-[100%] overflow-hidden ml-4">
                                <a href={"/profile/" + data.uid_user}>
                                    <div>
                                        <div className="flex secondary gap-1 font-semibold mb-1">
                                            <svg className="w-[18px] " focusable="false" aria-hidden="true" viewBox="0 0 24 24" fill="#c30000">
                                                <path d="m23 12-2.44-2.79.34-3.69-3.61-.82-1.89-3.2L12 2.96 8.6 1.5 6.71 4.69 3.1 5.5l.34 3.7L1 12l2.44 2.79-.34 3.7 3.61.82L8.6 22.5l3.4-1.47 3.4 1.46 1.89-3.19 3.61-.82-.34-3.69L23 12zm-12.91 4.72-3.8-3.81 1.48-1.48 2.32 2.33 5.85-5.87 1.48 1.48-7.33 7.35z"></path>
                                            </svg>
                                            Verified Agen
                                        </div>
                                        <div className="font-bold text-[20px] overflow-hidden whitespace-nowrap text-ellipsis text-gray-800 h-[25px]">{data.fullname}</div>
                                    </div>                                    
                                    <span className="absolute top-[50%] right-0" style={{ transform: "translateY(-50%)" }}>
                                        <svg className="w-[18px] h-[18px]" viewBox="0 0 1024 1024" fillRule="evenodd"><path d="M277.333 85.333v60.331l366.336 366.336-366.336 366.336v60.331h60.331l409.003-408.981v-35.307l-409.003-409.045z"></path></svg>
                                    </span>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div>
                        <WaButton className="w-full" phone={data.phone}>
                            <div className="p-2 mt-3 mb-2 text-center w-full" style={{ borderRadius: '8px', border: "2px solid #333" }}>Chat Dengan Penjual</div>
                        </WaButton>
                    </div>
                    <div className="flex h-[16px] leading-[18px] text-gray-800 text-[12px] justify-center items-center py-[28px]">
                        <span className="mx-[8px]">
                            <svg className="w-[26px] h-[26px]" viewBox="0 0 1024 1024" fillRule="evenodd"><path d="M784.555 852.395c-331.435-14.635-598.315-281.515-612.949-612.949l149.973-59.989 91.691 183.424-70.997 35.499v26.453c0 141.653 115.243 256.896 256.896 256.896h26.453l11.861-23.637 23.68-47.36 183.381 91.733-59.989 149.931zM918.101 643.456l-256.939-128.469-57.472 19.2-30.037 60.032c-74.069-11.093-132.736-69.803-143.872-143.872l60.075-30.037 19.157-57.429-128.427-256.939-54.187-20.608-214.187 85.632-26.88 39.808c0 401.365 326.571 727.893 727.936 727.893l39.765-26.88 85.632-214.187-20.608-54.187z"></path></svg>
                        </span>
                        <div>{tampilkanNumber?data.phone:'*** *** ***'}</div>
                        <button onClick={()=>{
                            if (session) {
                                tampilkanNumber?setTampilkanNumber(null):setTampilkanNumber(true);
                            } else {
                                route.push('/login')
                            }
                        }} className="mx-[8px] cursor-pointer" style={{ color: "#6c99ff", textDecoration: "underline" }}>{tampilkanNumber ? 'Sembunyikan nomor': 'Tampilkan nomor'}</button>
                    </div>
                </div>
                <div className="mt-2 md:mt-5 rounded-sm  md:rounded-md shadow-xl bg-white w-full md-w-[400px] px-5 py-3 ">
                    <div className="leading-[20px]">
                        <h3 className="text-[20px] font-bold text-gray-800 mb-[20px]">Lokasi Iklan</h3>
                    </div>
                    <div>
                        {/* <iframe 
                            src={`https://www.google.com/maps?q=${maps}&hl=es;z%3D14&amp&output=embed`} style={{width:"100%", height:"250px", border:0}} 
                            allowFullScreen="" 
                            loading="lazy" 
                            referrerPolicy="no-referrer-when-downgrade">
                            </iframe> */}
                        {
                            maps ?
                                <Iframe url={`https://www.google.com/maps?q=${maps}&hl=es;z%3D14&amp&output=embed`}
                                    width="100%"
                                    height="320px"
                                    id=""
                                    className=""
                                    display="block"
                                    position="relative" />
                                : <></>
                        }
                    </div>
                </div>
                <div className="relative w-[100%] shadow-xl md:shadow-none bg-white md:bg-transparent overflow-hidden border-t border-gray-400 md:border-0 rounded-[4px]">
                    <div className="p-[20px] md:px-0">
                        <div>
                            <div className="flex justify-between items-center text-[14px]">
                                <strong>ID IKLAN {data.uniqid ? data.uniqid.split('-')[1] : ""}</strong>
                                <strong>LAPORKAN IKLAN INI</strong>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div className="col-span-3 md:col-span-2 gap-2 md:gap-[50px] mt-5">
                <div className="md:mb-2 md:p-5 rounded-xm">
                    <div className="pb-[16px]">
                        <h3 className="text-[20px] font-bold text-gray-800 mb-5">Iklan Terkait</h3>
                        <div>
                            <IklanTerkait data={props} />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <StickyButton data={props} />
    </>)
}