import { Home, ScrollText, Layers, Gamepad2, Mail } from 'lucide-react'

export type TabId = 'start' | 'regeln' | 'karten' | 'spiel' | 'kontakt'

const TABS: { id: TabId; label: string; icon: typeof Home }[] = [
  { id: 'start', label: 'Start', icon: Home },
  { id: 'regeln', label: 'Regeln', icon: ScrollText },
  { id: 'karten', label: 'Karten', icon: Layers },
  { id: 'spiel', label: 'Spiel', icon: Gamepad2 },
  { id: 'kontakt', label: 'Kontakt', icon: Mail },
]

interface Props {
  aktiv: TabId
  onWechsel: (tab: TabId) => void
}

export default function BottomNav({ aktiv, onWechsel }: Props) {
  return (
    <nav className="fixed inset-x-0 bottom-0 z-50 border-t border-white/10 bg-[#170a2e]/85 backdrop-blur-xl">
      <div className="mx-auto flex max-w-md items-stretch justify-between px-1 pb-safe">
        {TABS.map(({ id, label, icon: Icon }) => {
          const istAktiv = id === aktiv
          return (
            <button
              key={id}
              onClick={() => onWechsel(id)}
              className={`flex flex-1 flex-col items-center gap-0.5 py-2.5 transition-all duration-200 ${
                istAktiv ? 'text-pink-400' : 'text-white/45 hover:text-white/70'
              }`}
              aria-current={istAktiv ? 'page' : undefined}
            >
              <span
                className={`rounded-full px-4 py-0.5 transition-all duration-300 ${
                  istAktiv ? 'bg-pink-400/15 shadow-[0_0_16px_rgba(244,114,182,0.35)]' : ''
                }`}
              >
                <Icon size={21} strokeWidth={istAktiv ? 2.4 : 2} />
              </span>
              <span className={`text-[10px] font-bold tracking-wide ${istAktiv ? 'font-extrabold' : ''}`}>
                {label}
              </span>
            </button>
          )
        })}
      </div>
    </nav>
  )
}