import {NavLink} from 'react-router-dom';
import {useTranslation} from 'react-i18next';
import {Gift, Library} from 'lucide-react';

import {cn} from '@/lib/utils';

const TABS = [
    {to: '/library', labelKey: 'LIBRARY.TITLE', icon: Library},
    {to: '/wishlist', labelKey: 'WISHLIST.TITLE', icon: Gift},
];

export default function LibraryTabs() {
    const {t} = useTranslation();
    return (
        <nav aria-label={t('LIBRARY.TITLE')} className="inline-flex rounded-lg bg-muted p-1 text-sm">
            {TABS.map(({to, labelKey, icon: Icon}) => (
                <NavLink
                    key={to}
                    to={to}
                    end
                    className={({isActive}) => cn(
                        'flex items-center gap-1.5 rounded-md px-3 py-1.5 font-medium transition-colors',
                        isActive ? 'bg-background text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground',
                    )}
                >
                    <Icon className="size-4"/>
                    {t(labelKey)}
                </NavLink>
            ))}
        </nav>
    );
}