import React from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import { useI18n } from '../../hooks/useI18n';
import './index.css';

const BottomNavigation: React.FC = () => {
  const { t } = useI18n();
  const navigate = useNavigate();
  const location = useLocation();

  const tabs = [
    {
      path: '/home',
      text: t('navigation.playground'),
      icon: '/assets/icons/playground.png',
      selectedIcon: '/assets/icons/playground-selected.png',
    },
    {
      path: '/history',
      text: t('navigation.mine'),
      icon: '/assets/icons/user.png',
      selectedIcon: '/assets/icons/user-selected.png',
    },
  ];

  const handleTabClick = (path: string) => {
    navigate(path);
  };

  return (
    <div className="bottom-navigation">
      {tabs.map((tab) => {
        const isActive = location.pathname === tab.path;
        return (
          <div
            key={tab.path}
            className={`tab-item ${isActive ? 'active' : ''}`}
            onClick={() => handleTabClick(tab.path)}
          >
            <img
              className="tab-icon"
              src={isActive ? tab.selectedIcon : tab.icon}
              alt={tab.text}
            />
            <span className="tab-text">{tab.text}</span>
          </div>
        );
      })}
    </div>
  );
};

export default BottomNavigation;
