import React from "react";

function ListMenu({ list, isOpen }) {
  return (
    <ul
      className={`
      mt-3 lg:mt-0 w-full lg:w-fit lg:!max-h-fit flex flex-col overflow-hidden transition-all duration-500 gap-3
      ${isOpen ? "max-h-[150px]" : "max-h-0"}
    `}
    >
      {list.map((item, idx) => (
        <li
          key={idx}
          className={`
            relative cursor-pointer after:absolute after:right-0 after:h-0.5 after:bottom-0 after:w-0
            ${
              idx === 0
                ? "hidden lg:flex text-[#3B3B3B] after:hover:w-full after:transition-all after:hover:bg-[#F17732] font-bold pb-1.5"
                : "text-[#616161] border-transparent font-normal"
            } 
            text-[16px] w-fit
            `}
        >
          {item}
        </li>
      ))}
    </ul>
  );
}

export default ListMenu;