import TopBarButton from '../TopBarButton';
import { useLocation, useNavigate } from 'react-router-dom';
import styles from './index.module.scss';
import { Links } from '../../types/types';

export default function TopBar({ links }: { links: Links }) {
  const navigate = useNavigate();
  const location = useLocation();
  return (
    <div className={styles['top-bar']}>
      {links.map((link) => (
        <TopBarButton
          title={link.title}
          callBack={() => navigate(link.path)}
          active={location.pathname === `${link.path}`}
        />
      ))}
    </div>
  );
}