import { Link, useLocation } from 'react-router-dom'
import { Home, Users, Calculator, CalendarCheck, Shield } from 'lucide-react'
import clsx from 'clsx'

const tabs = [
  { path: '/', label: '首页', icon: Home },
  { path: '/roster', label: '团队', icon: Users },
  { path: '/money', label: '薪酬', icon: Calculator },
  { path: '/attendance', label: '时间', icon: CalendarCheck },
  { path: '/evidence', label: '合规', icon: Shield },
]

export default function MobileTabBar() {
  const location = useLocation()
  return (
    <nav className="md:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 flex justify-around items-center h-14 z-50">
      {tabs.map((tab) => {
        const Icon = tab.icon
        const active = location.pathname === tab.path
        return (
          <Link
            key={tab.path}
            to={tab.path}
            className={clsx(
              'flex flex-col items-center justify-center gap-0.5 flex-1 h-full',
              active ? 'text-primary' : 'text-gray-500',
            )}
          >
            <Icon className="w-5 h-5" />
            <span className="text-xs">{tab.label}</span>
          </Link>
        )
      })}
    </nav>
  )
}
