import { Link } from 'react-router'

import { MENU } from './menu'

export const Sidebar = () => {
  return (
    <div className="flex flex-col gap-y-10 p-5">
      {MENU.map(({ group, items }) => (
        <div className="flex flex-col">
          <div
            key={group}
            className="px-5 pb-4 text-[#4C5CA0]/50 uppercase"
          >
            {group}
          </div>
          {items.map(({ title, url, icon: Icon }) => (
            <Link
              to={url}
              key={`${group}-${title}`}
              className="group/menu hover:bg-opacity-10 flex h-[42px] w-[200px] items-center gap-x-3 rounded-md px-5 transition-all hover:bg-[#707FDD]/10 hover:font-bold hover:text-[#5363AB]"
            >
              <Icon className="h-[18px] w-[18px] text-[#A6ABC8] transition-all group-hover/menu:text-[#5363AB]" />
              <span className="text-[#273240] transition-all group-hover/menu:text-[#5363AB]">
                {title}
              </span>
            </Link>
          ))}
        </div>
      ))}
    </div>
  )
}