"use client";

import { useLang } from "@/lib/lang";
import { useConfig } from "@/lib/config";
import { FeatherIcon, Pic } from "@/Theme/Midone";
import { Detail } from '@/app/(lms-panel)/[lang]/panel/(system)/(Users)/users/view';

export function Info({ item, linkView }){
    const { Lang, local } = useLang();
    const { mediaPath, nextAdmin } = useConfig();
    
    return(
        <>
            <div className="intro-y box px-5 pt-5 mt-5">
                <div className="flex flex-col lg:flex-row border-b border-gray-200 dark:border-dark-5 pb-5 -mx-5">
                    <div className="flex flex-1 px-5 items-center justify-center lg:justify-start">
                        <div className="w-20 h-20 sm:w-24 sm:h-24 flex-none lg:w-32 lg:h-32 image-fit relative">
                            <Pic src={`${mediaPath}/users/${item?.photo}`} defaultImg={`${mediaPath}/public/default/avatar.png`} classImg="rounded-full" key={"img"+item?.photo} />
                        </div>
                        <div className="mr-5">
                            <div className="w-24 sm:w-40 truncate sm:whitespace-normal font-medium text-lg">{`${item?.role?.["title_" + local]} : ${item?.firstname} ${item?.lastname}`}</div>
                            <div className="text-gray-600">{Lang("gender")+" : "}{(item?.gender)? item?.gender?.["title_" + local] : "---" }</div>
                            {(item?.studentID)? <div className="text-gray-600">{Lang("studentID")+" : "+item?.studentID}</div> : "" }
                        </div>
                    </div>
                    <Detail item={item} />
                </div>
                <div className="nav nav-tabs flex-col sm:flex-row justify-center lg:justify-start">
                    {[
                        { href: `${nextAdmin}/${linkView}/${item?.id}/edit`, icon: "User", text:Lang("public.edit_profile") },
                        { href: `${nextAdmin}/changePassword/${item?.id}`, icon: "Lock", text: Lang("public.change_password") },
                    ].map((link, index) => (
                        <a key={index} className="flex items-center mt-3" href={link.href}>
                            <FeatherIcon size="18" iconClassName="mb-2 ml-1" name={link.icon} url={link.href} tooltip={link.text} />
                            {link.text}
                        </a>
                    ))}
                </div>
            </div>
        </>
    );
}