import { Navbar, Nav } from 'react-bootstrap';
import { Link, useLocation } from 'react-router-dom';
import { FaTachometerAlt, FaDesktop, FaChartBar, FaCog, FaBars } from "react-icons/fa";
import { useState, useEffect } from 'react';

const Sidebar = ({ theme }) => {
  const location = useLocation();

  return (
    <div className={`sidebar-app ${theme}`}>
      <Nav className="flex-column w-100">
        <Nav.Link as={Link} to="/dashboard" className={location.pathname === "/dashboard" ? "active" : ""}>
          <FaTachometerAlt className="me-2" /> Dashboard
        </Nav.Link>
        <Nav.Link as={Link} to="/devices" className={location.pathname === "/devices" ? "active" : ""}>
          <FaDesktop className="me-2" /> Devices
        </Nav.Link>
        <Nav.Link as={Link} to="/reports" className={location.pathname === "/reports" ? "active" : ""}>
          <FaChartBar className="me-2" /> Reports
        </Nav.Link>
        <Nav.Link as={Link} to="/settings" className={location.pathname === "/settings" ? "active" : ""}>
          <FaCog className="me-2" /> Settings
        </Nav.Link>
      </Nav>
    </div>
  );
};

export default Sidebar;