import React from 'react';
import { Link, useLocation } from 'react-router-dom';
import './Layout.css';

interface LayoutProps {
  children: React.ReactNode;
}

function Layout({ children }: LayoutProps) {
  const location = useLocation();

  const navigationItems = [
    { path: '/', label: '仪表板', icon: '📊' },
    { path: '/sync', label: '数据同步', icon: '🔄' },
    { path: '/analysis', label: '数据分析', icon: '📈' },
    { path: '/recommendations', label: '健康建议', icon: '💡' },
    { path: '/settings', label: '设置', icon: '⚙️' },
  ];

  return (
    <div className="layout">
      <header className="header">
        <div className="header-content">
          <h1 className="logo">🏃 Garmin Health Lab</h1>
          <p className="tagline">佳明健康数据分析平台</p>
        </div>
      </header>

      <div className="container">
        <nav className="sidebar">
          <ul className="nav-list">
            {navigationItems.map(item => (
              <li key={item.path}>
                <Link
                  to={item.path}
                  className={`nav-link ${location.pathname === item.path ? 'active' : ''}`}
                >
                  <span className="icon">{item.icon}</span>
                  <span className="label">{item.label}</span>
                </Link>
              </li>
            ))}
          </ul>
        </nav>

        <main className="content">
          {children}
        </main>
      </div>

      <footer className="footer">
        <p>© 2024 Garmin Health Lab. All rights reserved.</p>
      </footer>
    </div>
  );
}

export default Layout;