import React, { useState } from 'react';
import { Link, useLocation } from 'react-router-dom';
import ResizablePanel from './ResizablePanel';

const NavigationPanel: React.FC = () => {
  const [isCollapsed, setIsCollapsed] = useState(false);
  const location = useLocation();

  const menuItems = [
    { path: '/', label: 'Dashboard', icon: 'fas fa-home' },
    { path: '/health', label: 'Health', icon: 'fas fa-heartbeat' },
    { path: '/costs', label: 'Costs', icon: 'fas fa-dollar-sign' },
    { path: '/monitoring', label: 'Monitoring', icon: 'fas fa-chart-line' },
    { path: '/admin', label: 'Admin', icon: 'fas fa-cog' },
  ];

  return (
    <ResizablePanel
      position="left"
      defaultSize={250}
      minSize={150}
      maxSize={400}
      collapsed={isCollapsed}
      onCollapsedChange={setIsCollapsed}
    >
      <div className="navigation-panel">
        <div className="navigation-header">
          <h2 className="text-xl font-bold">
            <i className="fas fa-cloud mr-2"></i>
            Navigation
          </h2>
        </div>
        
        <nav className="navigation-menu">
          {menuItems.map((item) => (
            <Link
              key={item.path}
              to={item.path}
              className={`nav-item ${location.pathname === item.path ? 'active' : ''}`}
            >
              <i className={`${item.icon} mr-3`}></i>
              <span>{item.label}</span>
            </Link>
          ))}
        </nav>
      </div>
    </ResizablePanel>
  );
};

export default NavigationPanel;

