import React from 'react';
import { Outlet, useNavigate, useLocation } from 'react-router-dom';
import { Home, BookOpen, Bot, Grid, User } from 'lucide-react';

const ChildrenLayout: React.FC = () => {
  const navigate = useNavigate();
  const location = useLocation();

  const navItems = [
    { path: '/children/home', icon: <Home size={24} />, label: '首页' },
    { path: '/children/news', icon: <BookOpen size={24} />, label: '资讯' },
    { path: '/children/ai-chat', icon: <Bot size={24} />, label: 'AI助手' },
    { path: '/children/services', icon: <Grid size={24} />, label: '服务站' },
    { path: '/children/profile', icon: <User size={24} />, label: '我的' },
  ];

  return (
    <div className="flex flex-col min-h-screen bg-gray-50 text-gray-900 font-sans">
      <main className="flex-1 overflow-y-auto pb-20">
        <Outlet />
      </main>

      <nav className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 flex justify-around items-center h-16 px-2 shadow-[0_-4px_10px_rgba(0,0,0,0.05)] z-50">
        {navItems.map((item) => {
          const isActive = location.pathname.startsWith(item.path);
          return (
            <button
              key={item.path}
              onClick={() => navigate(item.path)}
              className={`flex flex-col items-center justify-center w-full h-full space-y-1 transition-colors ${
                isActive ? 'text-blue-600' : 'text-gray-500 hover:text-gray-700'
              }`}
            >
              {item.icon}
              <span className={`text-[10px] ${isActive ? 'font-bold' : 'font-medium'}`}>{item.label}</span>
            </button>
          );
        })}
      </nav>
    </div>
  );
};

export default ChildrenLayout;