"use client";

import Link from "next/link";
import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
import { useState } from "react";

export default function MenuColumn({ items }: { items: any }) {
    const [active, setActive] = useState(null);

    return (
        <>
            <div className="w-72 border-r border-gray-200 py-4">
                {items.map((item: any, index: any) => (
                    <div
                        key={item.title}
                        onMouseEnter={() => setActive(index)}
                        className="
                            flex
                            items-center
                            justify-between
                            px-8
                            py-3
                            hover:bg-gray-100
                            cursor-pointer
                        "
                    >
                        <Link href={item.href}>
                            {item.title}
                        </Link>

                        {item.children && (
                            <KeyboardArrowRightIcon fontSize="small" />
                        )}
                    </div>
                ))}
            </div>

            {active !== null &&
                items[active]?.children && (
                    <MenuColumn items={items[active].children} />
                )}
        </>
    );
}