import {Link, useLocation} from 'react-router-dom';
import {useTranslation} from 'react-i18next';

import {cn} from '@/lib/utils';
import {isNavActive, NAV_ITEMS} from './navItems.js';

/**
 * The main navigation on a phone: a bar at the bottom edge, every item with its label.
 */
export default function BottomNav() {
    const {t} = useTranslation();
    const {pathname} = useLocation();
    return (
        <nav aria-label={t('NAV.MENU')}
             className="fixed inset-x-0 bottom-0 z-50 flex border-t bg-background/95 pb-[env(safe-area-inset-bottom)] backdrop-blur md:hidden">
            {NAV_ITEMS.map((item) => {
                const active = isNavActive(item, pathname);
                return (
                    <Link key={item.to} to={item.to} aria-current={active ? 'page' : undefined}
                          className={cn('flex flex-1 flex-col items-center gap-0.5 py-2 text-[11px] font-medium',
                              active ? 'text-primary' : 'text-muted-foreground')}>
                        <item.Icon className="size-5"/>
                        <span className="max-w-full truncate px-1">{t(item.labelKey)}</span>
                    </Link>
                );
            })}
        </nav>
    );
}