"use client";

import { useEffect } from "react";
import { useConfig } from "@/lib/config";
import { useLang } from "@/lib/lang";
import Link from "next/link";
import { useData,useFormRefs,Pic } from "@/Theme/Midone/Utils";
import { useAuth } from "@/lib/auth";

export function EventList(){
    const {Lang,local} = useLang();
    const {laraAdmin,nextAdmin,mediaPath} = useConfig();
    const component = useFormRefs();
    const { get } = useData();
    const { user } = useAuth({ guard: "admin" });
    const flag = user?.role_id;
    const formUrl = `/events`;
    const url = `${laraAdmin}${formUrl}`;

    useEffect(() => {
        get(url+"/dashboard?flag="+flag, component, "info");
    }, []);
    
    let items = component?.state?.info?.data;

    return(
        <>
        {(items?.map((item, index)=>{
            let limit = 120;
            let description = item?.description;
            if(description?.length > limit) description = description.substring(0, limit)+"...";
            return(
                <div className="col-span-12 lg:col-span-6 mt-6" key={index}>
                    <div className="ads-box box p-8 relative overflow-hidden intro-y">
                        <div className="ads-box__title w-full sm:w-52 text-theme-17 dark:text-white text-xl -mt-3"><span className="font-medium">{item?.title}</span></div>
                        <div className="w-full sm:w-60 leading-relaxed text-gray-600 mt-2" dangerouslySetInnerHTML={{__html: description}} ></div>
                        <div className="w-48 relative mt-6 cursor-pointer tooltip" title="Copy referral link">
                            {/* <Link href={nextAdmin+formUrl+"/"+item?.id} className="form-control">{Lang("public.view")} */}
                            <Link href={nextAdmin+"/dashboard"+formUrl+"/"+item?.id} className="form-control">{Lang("public.view")}
                                <i className="absolute left-0 top-0 bottom-0 my-auto ml-4 w-4 h-4"></i>
                            </Link>
                            {/* <input className="form-control" value="https://dashboard.in"/>
                            <i data-feather="copy" className="absolute left-0 top-0 bottom-0 my-auto ml-4 w-4 h-4"></i>  */}
                        </div>
                        {/* <div className="ltr w-64 h-64 bg-gray-300 overflow-hidden mt-4"> */}
                        <div className="ltr bg-gray-300 overflow-hidden mt-4">
                            <Pic src={`${mediaPath}/event/${item?.image}`} defaultImg={`${mediaPath}/event/${item?.image}`} 
                                classImg=" sm:block absolute top-0 start-0 w-1/2 sm:h-full  mb-1 -ml-12 sm:object-cover object-contain"
                                // classImg="hidden sm:block absolute top-0 start-0 w-1/2 mb-1 -ml-12"
                            />
                        </div>
                    </div>
                </div>
            );
        }))}
        </>
    );
}