import { useNavigate } from 'react-router-dom'

const tabs = [
  { label: '总览', icon: '📊', path: '/dashboard' },
  { label: 'Gateway', icon: '📡', path: '/gateway' },
  { label: 'Kanban', icon: '📋', path: '/kanban' },
  { label: 'Cron', icon: '⏰', path: '/cron' },
]

export interface TabBarProps {
  activePath: string
}

export default function TabBar({ activePath }: TabBarProps) {
  const navigate = useNavigate()

  return (
    <div
      className="fixed bottom-0 left-0 right-0 flex items-center z-50"
      style={{
        height: 56,
        background: 'var(--bg-nav)',
        borderTop: '1px solid var(--border)',
      }}
    >
      {tabs.map(tab => {
        const isActive = activePath === tab.path
        return (
          <button
            key={tab.path}
            onClick={() => navigate(tab.path)}
            className="flex-1 flex flex-col items-center justify-center gap-[2px] cursor-pointer bg-transparent border-none transition-colors duration-100"
            style={{
              color: isActive ? 'var(--honey)' : 'var(--text-dim)',
              fontWeight: isActive ? 600 : 400,
            }}
          >
            <span style={{ fontSize: 20 }}>{tab.icon}</span>
            <span style={{ fontSize: 11 }}>{tab.label}</span>
          </button>
        )
      })}
    </div>
  )
}