"use client";

import { useLang } from "@/lib/lang";
import { useConfig } from "@/lib/config";
import { useAccess } from "@/lib/access";
import { Grid,Frame,useData,FeatherIcon } from "@/Theme/Midone/Utils";

export default function List(){
    const {Lang} = useLang();
    const {laraAdmin,nextAdmin,mediaPath} = useConfig();
    const formUrl = "/sliders"; 
    const {destroy} = useData();
    const { componentPermission,checkPermission } = useAccess();
    componentPermission("sliders.index");

    let info = {
        insertLink: checkPermission("sliders.store")&& nextAdmin+formUrl+"/new",
        url: laraAdmin+formUrl,
        columns: [
            {jsx:(item)=><img src={mediaPath+"/sliders/"+item?.image} width={100} height={100} alt={item?.image} />},
            {label: "title", field: "title"},
            {label: "link", field: "link"},
            {label: "order", field: "order"},
            {label: "",
                sort:false, 
                width:"110px", 
                jsx:(item)=><>
                    <div className='flex justify-center '>
                        <FeatherIcon name="Edit" permission="sliders.update" url={nextAdmin+formUrl+"/"+item?.id+"/edit"} tooltip={Lang('public.edit')} />
                        <FeatherIcon name="XOctagon" permission="sliders.destroy" tooltip={Lang('public.delete')} color="darkred" onClick={()=>destroy(laraAdmin+formUrl+"/"+item?.id)} />
                    </div>
                </>
            },
        ],
    }

    return(
        <Frame title={Lang(["public.sliders"])}>
            <div className="intro-y col-span-12">
                <Grid {...info} key={"table key"} />
            </div>
        </Frame>
    );
}