/**
 * @ai-summary Reusable navigation menu component for Google/Apple/Waze options
 */

import React from 'react';
import { Menu, MenuItem } from '@mui/material';
import { buildNavigationLinks, StationLike } from '../utils/navigation-links';

interface NavigationMenuProps {
  anchorEl: HTMLElement | null;
  station: StationLike | null;
  onClose: () => void;
}

/**
 * Navigation menu with Google Maps, Apple Maps, and Waze options
 * Used across StationCard, CommunityStationCard, and SavedStationsList
 */
export const NavigationMenu: React.FC<NavigationMenuProps> = ({
  anchorEl,
  station,
  onClose
}) => {
  if (!station) {
    return null;
  }

  const links = buildNavigationLinks(station);

  return (
    <Menu
      anchorEl={anchorEl}
      open={Boolean(anchorEl)}
      onClose={onClose}
      anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
      transformOrigin={{ vertical: 'top', horizontal: 'right' }}
    >
      <MenuItem
        component="a"
        href={links.google}
        target="_blank"
        rel="noopener"
        onClick={onClose}
      >
        Navigate in Google
      </MenuItem>
      <MenuItem
        component="a"
        href={links.apple}
        target="_blank"
        rel="noopener"
        onClick={onClose}
      >
        Navigate in Apple Maps
      </MenuItem>
      <MenuItem
        component="a"
        href={links.waze}
        target="_blank"
        rel="noopener"
        onClick={onClose}
      >
        Navigate in Waze
      </MenuItem>
    </Menu>
  );
};

export default NavigationMenu;
