import React from "react";
import { Link, useLocation } from "react-router-dom";

const Navigation: React.FC = () => {
  const location = useLocation();

  const navigationItems = [
    { path: "/", label: "Home", name: "首页" },
    { path: "/spatial-clustering", label: "Spatial clustering", name: "空间聚类" },
    { path: "/gene-view", label: "Gene Expression", name: "基因表达" },
    { path: "/temporal-analysis", label: "Temporal Analysis", name: "时间序列分析" },
    { path: "/resource", label: "Resource", name: "资源" },
    { path: "/download", label: "Download", name: "下载" },
  ];

  return (
    <nav className="main-navigation">
      <div className="nav-container">
        <div className="nav-brand">
          <Link to="/" className="nav-brand-link">
            <span className="nav-brand-text">Digital Embryo</span>
          </Link>
        </div>
        <div className="nav-links">
          {navigationItems.map((item) => (
            <Link
              key={item.path}
              to={item.path}
              className={`nav-link ${location.pathname === item.path ? 'active' : ''}`}
            >
              {item.label}
            </Link>
          ))}
        </div>
      </div>
    </nav>
  );
};

export default Navigation;