import React from 'react';
import { Link, useLocation } from 'react-router-dom';
import { routesData } from '~/driven/utils/configs/appConfig';
import { icons } from '~/driven/utils/constants/assertUrls';

export default function Sidebar() {
  const isCurrentPage = useLocation();

  const pages = Object.keys(routesData).map((routeKey) => {
    const key = routeKey as keyof typeof routesData;
    return (
      <Link
        key={key}
        to={routesData[key].path}
        className={`flex text-white mb-6 text-sm w-full  py-2 pl-2 rounded-lg ${
          isCurrentPage.pathname === routesData[key].path ? 'bg-primary-300' : ''
        }`}
      >
        <img src={routesData[key].icon} alt='page icon' className='mr-2' />
        <div>{routesData[key].title}</div>
      </Link>
    );
  });

  return (
    <aside className='w-[15rem] min-w-[10rem] [background:var(--color-gradient-primary-dark)] p-4 pt-6'>
      <div className='logo'>
        <img src={icons.logo} alt='logo icon' />
      </div>
      <div className='mt-14 flex flex-col items-baseline'>{pages}</div>
    </aside>
  );
}