"use client";

import { useLang } from "@/lib/lang";
import { useConfig } from "@/lib/config";
import { useUtility } from "@/lib/utility";

export function Detail({ item }){
    const { Lang,local } = useLang();
    const { useCity } = useConfig();
    const { getRelation,getField } = useUtility();
    let city = item?.city;
    let province = city?.province;

    return(
        <>
            <div className="mt-6 lg:mt-0 flex-1 dark:text-gray-300 px-5 border-l border-r border-gray-200 dark:border-dark-5 border-t lg:border-t-0 pt-5 lg:pt-0">
                <div className="font-medium text-center lg:text-right lg:mt-3">{Lang("public.more_detail")}</div>
                <div className="flex flex-col justify-center lg:items-start">
                    {[
                        { label: "public.codemeli", value: getField(item?.codemeli) },
                        { label: "public.username", value: getField(item?.username) },
                        { label: "public.mobile", value: item?.mobile },
                        { label: "public.email", value: getField(item?.email) },
                    ].map((detail, index) => (
                        <div key={index} className="truncate sm:whitespace-normal flex items-center mt-3">
                            {`${Lang(detail.label)} : ${detail.value}`}
                        </div>
                    ))}
                    {useCity=="true" && <div className="truncate sm:whitespace-normal flex items-center mt-3">
                            {`${Lang("location")} : ${city?.["name_fa"]+"-"+province?.["name_fa"]}`}
                        </div>
                    }
                </div>
            </div>
            <div className="mt-6 lg:mt-0 flex-1 px-5 border-t lg:border-0 border-gray-200 dark:border-dark-5 pt-5 lg:pt-0">
                <div className="font-medium text-center lg:text-right lg:mt-5">{Lang("public.user_detail")}</div>
                <div className="flex flex-col justify-center lg:items-start">
                    {[
                        { label: "public.last_login", value: getField(item?.last_login) },
                        { label: "public.creator", value: getRelation(item?.creator) },
                        { label: "public.editor", value: getRelation(item?.editor) },
                    ].map((detail, index) => (
                        <div key={index} className="flex items-center justify-center lg:justify-start mt-2">
                            <div className="mr-2 w-60 flex">{Lang(detail.label)+" : "}<span className="ml-3 font-medium">{`${detail.value}`}</span> </div>
                        </div>
                    ))}
                    <div className="flex items-center justify-center lg:justify-start mt-2">
                        <div className="mr-2 w-60 flex">{Lang("display_status")+":"}<span className="ml-3 font-medium">{`${item?.active_status?.["title_" + local]}`}</span> </div>
                    </div>
                </div>
            </div>
        </>
    );
}