'use client';

import { usePathname, useRouter } from 'next/navigation';
import { BottomNavigation, BottomNavigationAction, Paper } from '@mui/material';
import {
  Home,
  Timeline,
  Chat,
  Insights,
  Settings,
} from '@mui/icons-material';
import { useTranslation } from '@/hooks/useTranslation';

export const TabBar = () => {
  const { t } = useTranslation('common');
  const router = useRouter();
  const pathname = usePathname();

  const tabs = [
    { label: t('navigation.home'), icon: <Home />, value: '/' },
    { label: t('navigation.track'), icon: <Timeline />, value: '/track' },
    { label: t('navigation.aiChat'), icon: <Chat />, value: '/ai-assistant' },
    { label: t('navigation.insights'), icon: <Insights />, value: '/insights' },
    { label: t('navigation.settings'), icon: <Settings />, value: '/settings' },
  ];

  return (
    <Paper
      component="nav"
      aria-label="Primary navigation"
      sx={{
        position: 'fixed',
        bottom: 0,
        left: 0,
        right: 0,
        zIndex: 1000,
      }}
      elevation={3}
    >
      <BottomNavigation
        value={pathname}
        onChange={(event, newValue) => {
          router.push(newValue);
        }}
        showLabels
        sx={{
          height: 64,
          '& .MuiBottomNavigationAction-root': {
            minWidth: 60,
            '&.Mui-selected': {
              color: 'primary.main',
            },
          },
        }}
      >
        {tabs.map((tab) => (
          <BottomNavigationAction
            key={tab.value}
            label={tab.label}
            icon={tab.icon}
            value={tab.value}
          />
        ))}
      </BottomNavigation>
    </Paper>
  );
};