import { Link } from "@tanstack/react-router";
import Logo from "/MAV.svg";

const Header = () => {
  return (
    <header className="bg-[#253445] p-4 flex border-b border-gray-500 justify-between items-center">
      <div className="w-28">
        <Link to={"/"}>
          <img src={Logo} alt="Logo" width={150} height={150} />
        </Link>
      </div>
      <div className="flex gap-4 text-lg items-center">
        <Link
          to="/"
          className="[&.active]:font-bold [&.active]:bg-gray-700 p-2 rounded-lg flex items-center gap-2 hover:bg-gray-700"
        >
          {/* <FontAwesomeIcon icon={faGaugeHigh} /> */}
          Dashboard
        </Link>

        <Link
          to="/baywatch"
          className="[&.active]:font-bold [&.active]:bg-gray-700 p-2 rounded-lg flex items-center gap-2 hover:bg-gray-700"
        >
          Cameras
        </Link>
        <Link
          to="/output"
          className="[&.active]:font-bold [&.active]:bg-gray-700 p-2 rounded-lg flex items-center gap-2 hover:bg-gray-700"
        >
          Output
        </Link>
        <Link
          to="/settings"
          className="[&.active]:font-bold [&.active]:bg-gray-700 p-2 rounded-lg flex items-center gap-2 hover:bg-gray-700"
        >
          Settings
        </Link>
      </div>
    </header>
  );
};

export default Header;