import React from 'react';
import { NavLink, useParams } from 'react-router-dom';
import { Button } from '@/components/ui/button';
import { GalleryHorizontal, Home, Trophy } from 'lucide-react';

function TabLink({ to, children }: { to: string; children: React.ReactNode }) {
  return (
    <NavLink to={to} className={({ isActive }) => (isActive ? 'text-foreground' : 'text-muted-foreground')}>
      {children}
    </NavLink>
  );
}

export default function BottomNav() {
  const { slug } = useParams();
  const base = `/e/${encodeURIComponent(slug ?? 'demo')}`;
  return (
    <div className="fixed inset-x-0 bottom-0 z-20 border-t bg-white/90 px-3 py-2 backdrop-blur dark:bg-black/40">
      <div className="mx-auto flex max-w-md items-center justify-between">
        <TabLink to={`${base}`}>
          <Button variant="ghost" size="sm" className="flex flex-col gap-1">
            <Home className="h-5 w-5" /> <span className="text-xs">Start</span>
          </Button>
        </TabLink>
        <TabLink to={`${base}/gallery`}>
          <Button variant="ghost" size="sm" className="flex flex-col gap-1">
            <GalleryHorizontal className="h-5 w-5" /> <span className="text-xs">Galerie</span>
          </Button>
        </TabLink>
        <TabLink to={`${base}/achievements`}>
          <Button variant="ghost" size="sm" className="flex flex-col gap-1">
            <Trophy className="h-5 w-5" /> <span className="text-xs">Erfolge</span>
          </Button>
        </TabLink>
      </div>
    </div>
  );
}