frontend/src/components/Navigation.jsx

import React, { useState } from "react";
import {
  Box,
  Typography,
  IconButton,
  Tooltip,
  Menu,
  MenuItem,
  useTheme,
  useMediaQuery,
} from "@mui/material";
import OpenInNewIcon from "@mui/icons-material/OpenInNew";
import ShareIcon from "@mui/icons-material/Share";
import MenuIcon from "@mui/icons-material/Menu";

const Navigation = () => {
  const [anchorEl, setAnchorEl] = useState(null);
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));

  const handleShare = async () => {
    try {
      await navigator.share({
        title: "YourBench Demo",
        text: "Check out this benchmark evaluation on YourBench!",
        url: window.location.href,
      });
    } catch (err) {
      console.log("Error sharing:", err);
    }
  };

  const handleMenuOpen = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleMenuClose = () => {
    setAnchorEl(null);
  };

  const externalLinks = [
    {
      name: "GitHub",
      url: "https://github.com/huggingface/yourbench",
    },
    {
      name: "Advanced demo",
      url: "https://huggingface.co/spaces/yourbench/advanced",
    },
  ];

  return (
    <Box
      sx={{
        position: "fixed",
        top: 24,
        left: 24,
        right: 24,
        margin: "auto",
        display: "flex",
        justifyContent: "space-between",
        alignItems: "center",
        zIndex: 1000,
      }}
    >
      {isMobile ? (
        <>
          <IconButton
            onClick={handleMenuOpen}
            size="small"
            sx={{
              color: "inherit",
              opacity: 0.7,
              "&:hover": {
                opacity: 1,
              },
            }}
          >
            <MenuIcon />
          </IconButton>
          <Menu
            anchorEl={anchorEl}
            open={Boolean(anchorEl)}
            onClose={handleMenuClose}
            PaperProps={{
              sx: {
                mt: 1,
                minWidth: 200,
                borderRadius: 2,
                boxShadow: "0 4px 20px rgba(0, 0, 0, 0.1)",
              },
            }}
          >
            {externalLinks.map((link) => (
              <MenuItem
                key={link.name}
                onClick={handleMenuClose}
                sx={{
                  display: "flex",
                  alignItems: "center",
                  gap: 1,
                  py: 1.5,
                  px: 2,
                }}
              >
                <a
                  href={link.url}
                  target="_blank"
                  rel="noopener noreferrer"
                  style={{
                    textDecoration: "none",
                    color: "inherit",
                    display: "flex",
                    alignItems: "center",
                    gap: 0.5,
                    width: "100%",
                  }}
                >
                  {link.name}
                  <OpenInNewIcon sx={{ fontSize: "0.75rem", opacity: 0.6 }} />
                </a>
              </MenuItem>
            ))}
          </Menu>
        </>
      ) : (
        <Typography
          variant="body2"
          sx={{
            display: "flex",
            gap: 2,
            alignItems: "center",
          }}
        >
          {externalLinks.map((link, index) => (
            <React.Fragment key={link.name}>
              <a
                href={link.url}
                target="_blank"
                rel="noopener noreferrer"
                style={{ textDecoration: "none", color: "inherit" }}
              >
                {link.name}
                <OpenInNewIcon
                  sx={{ fontSize: "0.75rem", ml: 0.5, opacity: 0.6 }}
                />
              </a>
              {index < externalLinks.length - 1 && (
                <Typography component="span" sx={{ opacity: 0.5 }}>
                  •
                </Typography>
              )}
            </React.Fragment>
          ))}
        </Typography>
      )}
      <Box sx={{ display: "flex", alignItems: "center" }}>
        <Tooltip title="Share">
          <IconButton
            onClick={handleShare}
            size="small"
            sx={{
              color: "inherit",
              opacity: 0.7,
              "&:hover": {
                opacity: 1,
              },
            }}
          >
            <ShareIcon fontSize="small" />
          </IconButton>
        </Tooltip>
      </Box>
    </Box>
  );
};

export default Navigation;