import React, { useState } from 'react';
import { Home, Heart, Plus, User, Bell } from 'lucide-react'; // Icons ke liye

const NavBarTabs = () => {
  const [active, setActive] = useState('home');

  return (
    <div className="flex items-center justify-center min-h-screen bg-slate-200">
      {/* Navbar Container */}
      <div className="relative flex items-center justify-between px-6 py-4 bg-white shadow-xl rounded-full w-96">
        
        {/* Home Button */}
        <button 
          onClick={() => setActive('home')}
          className={`p-2 transition-colors ${active === 'home' ? 'text-black' : 'text-gray-400'}`}
        >
          <Home size={24} />
        </button>

        {/* Likes Button */}
        <button 
          onClick={() => setActive('likes')}
          className={`p-2 transition-colors ${active === 'likes' ? 'text-black' : 'text-gray-400'}`}
        >
          <Heart size={24} />
        </button>

        {/* Mid Floating Action Button */}
        <div className="absolute -top-6 left-1/2 transform -translate-x-1/2">
          <button className="flex items-center justify-center w-14 h-14 bg-gradient-to-tr from-pink-500 to-red-500 text-white rounded-full shadow-lg shadow-pink-500/50 hover:scale-105 transition-transform">
            <Plus size={28} />
          </button>
        </div>

        {/* Profile Button */}
        <button 
          onClick={() => setActive('profile')}
          className={`p-2 transition-colors ${active === 'profile' ? 'text-black' : 'text-gray-400'}`}
        >
          <User size={24} />
        </button>

        {/* Alerts Button */}
        <button 
          onClick={() => setActive('alerts')}
          className={`p-2 transition-colors ${active === 'alerts' ? 'text-black' : 'text-gray-400'}`}
        >
          <Bell size={24} />
        </button>

      </div>
    </div>
  );
};

export default NavBarTabs;