"use client"
import { useState } from 'react';
import {
  Home,
  MessageCircle,
  BookOpen,
  User,
  Settings,
  ChevronUp,
  ChevronDown
} from 'lucide-react';

const SimpleSidebarBottom = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const menuItems = [
    { icon: Home, label: 'Home', href: '/' },
    { icon: MessageCircle, label: 'Messages', href: '/messages' },
    { icon: BookOpen, label: 'Learn AI', href: '/learn' },
    { icon: User, label: isLoggedIn ? 'Profile' : 'Login', href: isLoggedIn ? '/profile' : '/login' },
    { icon: Settings, label: 'Settings', href: '/settings' }
  ];

  const toggleSidebar = () => {
    setIsOpen(!isOpen);
  };

  const toggleLogin = () => {
    setIsLoggedIn(!isLoggedIn);
  };

  return (
    <div className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 shadow-lg">
      {/* Expandable Content */}
      <div
        className={`overflow-hidden transition-all duration-300 ease-in-out ${isOpen ? 'max-h-20 opacity-100' : 'max-h-0 opacity-0'
          }`}
      >
        <div className="flex justify-around items-center py-3 px-4">
          {menuItems.map((item, index) => (
            <a
              key={index}
              href={item.href}
              className="flex flex-col items-center space-y-1 text-blue-600 hover:text-blue-800 transition-colors duration-200 min-w-0"
            >
              <item.icon size={20} />
              <span className="text-xs font-medium truncate">{item.label}</span>
            </a>
          ))}
        </div>
      </div>

      {/* Toggle Button */}
      <div className="flex justify-center py-2">
        <button
          onClick={toggleSidebar}
          className="bg-blue-600 hover:bg-blue-700 text-white rounded-full p-2 shadow-md transition-all duration-200 hover:scale-110 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
          aria-label={isOpen ? "Close sidebar" : "Open sidebar"}
        >
          {isOpen ? <ChevronDown size={16} /> : <ChevronUp size={16} />}
        </button>
      </div>

      {/* Demo Toggle Button */}
      <div className="absolute top-2 right-2">
        <button
          onClick={toggleLogin}
          className="text-xs bg-gray-100 hover:bg-gray-200 px-2 py-1 rounded text-gray-600 transition-colors"
        >
          {isLoggedIn ? 'Logout' : 'Login'}
        </button>
      </div>
    </div>
  );
};

export default SimpleSidebarBottom;