import { Link } from 'react-router'

import { MENU } from './menu'

export const Sidebar = () => {
  return (
    <div>
      {MENU.map(({ group, items }) => (
        <>
          <div key={group}>{group}</div>
          {items.map(({ title, url, icon: Icon }) => (
            <Link
              to={url}
              key={`${group}-${title}`}
              className="flex items-center gap-x-3 text-[#273240]"
            >
              <Icon className="h-[18px] w-[18px] text-[#A6ABC8]" />
              <span>{title}</span>
            </Link>
          ))}
        </>
      ))}
    </div>
  )
}