import React from 'react';
import ButtonComponent from './ButtonComponent';
import tmrykLogo from '../assets/images/tmryk-logo-small.png';
import { Link, useLocation } from 'react-router-dom';
import theme from '../theme';

function HeaderComponent() {
    const location = useLocation();
    const selectedColor = "border-b-4 border-gray-500";
    const unselectedColor = "";
    const commonStyling = `hover:bg-gray-200 ${theme.primary_text_color}`
    const isSelected = (route) => location.pathname === route;
    return (
        <div className="header h-32 w-full bg-slate-50 inline-flex">
            <img src={tmrykLogo} alt="tmryk logo" className='w-[18rem] h-32'/>
            {/* TODO: Change  /model/2 to /model/:id*/}
            <ButtonComponent classNames={`${commonStyling} ${isSelected('/model/2') ? selectedColor : unselectedColor}`} text="Dashboard" link_to="/model/2"/>
            <ButtonComponent classNames={`${commonStyling} ${isSelected('/models') ? selectedColor : unselectedColor}`} text="AI Model Catalog" link_to="/models"/>
            {/* <ButtonComponent classNames={isSelected('/datasets') ? selectedColor : unselectedColor} text="Datasets" link_to="/datasets"/> */}
            <ButtonComponent classNames={`${commonStyling} ${isSelected('/attacks') ? selectedColor : unselectedColor}`} text="Attacks" link_to="/attacks"/>
        </div>
    );
  }
  
  export default HeaderComponent;