'use client';
import Link from "next/link";

import { FC } from "react";
import { MenuSingleProps, SingleLayerItemProps } from "@/validations/mutual/dashboard/props";
import { langGetKey } from "@/lib/langGet";

const SingleLayerItem: FC<SingleLayerItemProps> = ({ isActive, innerText, url }) => {
    let className = "py-3 px-4 text-sm rounded-xl cursor-pointer transition-colors duration-200 flex justify-between items-center w-full";
    if (isActive) { className += " bg-black text-white font-medium" }
    else { className += " bg-emerald-800 text-white hover:bg-emerald-700" }
    if (isActive) { return <div className={className}><span>{innerText}</span></div> }
    else { return <Link href={url} replace className={className}><span>{innerText}</span></Link> }
};

const MenuComponent: FC<MenuSingleProps> = ({ lang, activePageUrl, translations, menuItems, prefix }) => {

    const renderMenuItems = () => {
        return Object.keys(menuItems).map((key) => {
            const url = `${prefix}/${lang}${menuItems[key]}`;
            const isActive = `${activePageUrl}` === `${key}`;
            return <div key={`${key}-item`} className="mb-2"><SingleLayerItem isActive={isActive} innerText={langGetKey(translations, key)} url={url} /></div>
        });
    };

    return (
        <div className="fixed top-24 p-5 left-0 right-0 w-80 border-emerald-150 border-r-2 overflow-y-auto h-[calc(100vh-6rem)]">
            <div className="flex flex-col">{renderMenuItems()}</div>
        </div>
    );
};

export default MenuComponent;