import React from 'react'
import { Link, useLocation } from 'react-router-dom'
import { 
  LayoutDashboard,
  Play,
  BookOpen,
  HardDrive,
  Settings,
  Users,
} from 'lucide-react'

const Sidebar: React.FC = () => {
  const location = useLocation()

  const navigationItems = [
    {
      name: 'Dashboard',
      href: '/dashboard',
      icon: LayoutDashboard,
      description: 'System overview'
    },
    {
      name: 'Process Control',
      href: '/process',
      icon: Play,
      description: 'Start and monitor tempering'
    },
    {
      name: 'Recipes',
      href: '/recipes',
      icon: BookOpen,
      description: 'Manage tempering recipes'
    },
    {
      name: 'Hardware',
      href: '/hardware',
      icon: HardDrive,
      description: 'Monitor equipment status'
    },
    {
      name: 'Settings',
      href: '/settings',
      icon: Settings,
      description: 'System configuration'
    },
    {
      name: 'Users',
      href: '/users',
      icon: Users,
      description: 'User management'
    },
  ]

  const isActive = (href: string) => location.pathname === href

  return (
    <nav className="bg-white shadow-sm border-r border-gray-200 w-64 flex-shrink-0">
      <div className="p-4">
        <h2 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-4">
          Navigation
        </h2>
        
        <ul className="space-y-2">
          {navigationItems.map((item) => {
            const Icon = item.icon
            const active = isActive(item.href)
            
            return (
              <li key={item.name}>
                <Link
                  to={item.href}
                  className={`
                    flex items-center p-3 rounded-lg text-sm font-medium touch-optimized
                    transition-colors duration-150
                    ${active
                      ? 'bg-primary-50 text-primary-700 border border-primary-200'
                      : 'text-gray-700 hover:bg-gray-50 hover:text-gray-900'
                    }
                  `}
                >
                  <Icon 
                    className={`
                      w-5 h-5 mr-3 flex-shrink-0
                      ${active ? 'text-primary-600' : 'text-gray-400'}
                    `} 
                  />
                  <div className="flex flex-col">
                    <span>{item.name}</span>
                    <span className={`
                      text-xs mt-0.5
                      ${active ? 'text-primary-600' : 'text-gray-500'}
                    `}>
                      {item.description}
                    </span>
                  </div>
                </Link>
              </li>
            )
          })}
        </ul>
      </div>
    </nav>
  )
}

export default Sidebar