/**
 * 员工端底部导航栏
 */

import { Link, useLocation, useNavigate } from 'react-router-dom'
import { DollarSign, FileText, ScrollText, LogOut } from 'lucide-react'

const navItems = [
  { path: '/portal/payslip', label: '工资条', icon: DollarSign },
  { path: '/portal/contract', label: '我的合同', icon: FileText },
  { path: '/portal/policies', label: '规章制度', icon: ScrollText },
]

export default function PortalNav() {
  const location = useLocation()
  const navigate = useNavigate()

  const handleLogout = () => {
    localStorage.removeItem('portalToken')
    localStorage.removeItem('portalEmployee')
    navigate('/portal/login')
  }

  return (
    <div className="flex items-center justify-between mb-6 pb-3 border-b border-gray-200">
      <div className="flex items-center gap-4">
        {navItems.map((item) => {
          const Icon = item.icon
          const active = location.pathname === item.path
          return (
            <Link
              key={item.path}
              to={item.path}
              className={`flex items-center gap-1 text-sm ${active ? 'text-primary font-medium' : 'text-gray-500 hover:text-gray-700'}`}
            >
              <Icon className="w-4 h-4" />
              {item.label}
            </Link>
          )
        })}
      </div>
      <button
        onClick={handleLogout}
        className="flex items-center gap-1 text-sm text-gray-400 hover:text-gray-600"
      >
        <LogOut className="w-4 h-4" />
        退出
      </button>
    </div>
  )
}
