import React from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import Dock from '../../components/reactbits/Components/Dock/Dock';
import { FaHome, FaList, FaChartBar, FaUser } from 'react-icons/fa';
import MobileLogo from './MobileLogo';
import { useAuth } from '../../contexts/AuthContext';

const MobileDock = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const { userProfile } = useAuth();

  // Формируем navItems динамически, чтобы профиль был с login
  const navItems = [
    {
      icon: <FaHome className="w-6 h-6" />,
      path: '/',
    },
    {
      icon: <FaList className="w-6 h-6" />,
      path: '/catalog',
    },
    {
      icon: <FaChartBar className="w-6 h-6" />,
      path: '/rating',
    },
    {
      icon: <FaUser className="w-6 h-6" />,
      path: userProfile ? `/profile/${userProfile.login}` : '/auth/login',
    },
  ];

  const items = navItems.map((item) => ({
    ...item,
    onClick: () => navigate(item.path),
    className:
      location.pathname === item.path || (item.path.startsWith('/profile') && location.pathname.startsWith('/profile'))
        ? 'border-campfire-amber text-campfire-amber bg-campfire-charcoal/80'
        : 'border-campfire-ash/30 text-campfire-ash bg-campfire-charcoal/40',
    isRectangular: false,
  }));

  return (
    <div className="w-full max-w-md mx-auto px-2 flex items-center gap-2 justify-center">
      <Dock
        items={items}
        className="w-full justify-between bg-campfire-charcoal/40"
        panelHeight={60}
        dockHeight={90}
        baseItemSize={44}
        magnification={60}
        distance={120}
      />
    </div>
  );
};

export default MobileDock; 