import React from 'react';
import { ButtonGroup } from 'react-bootstrap';
import FlightIcon from '@mui/icons-material/Flight';
import Layout from '../components/Layout';
import { NavLink, Outlet, useLocation } from 'react-router';
import { ADSBDataProvider } from './adsb/ADSBData';
import type { NavLinkItem } from '../types/layout.types';

interface Props {
  navLinks?: NavLinkItem[];
}

const ADSB: React.FC<Props> = ({ navLinks = [] }) => {
  const location = useLocation();

  const viewButtons = (
    <ButtonGroup className="adsb-view-switch" size="sm" aria-label="ADSB view switch">
      <NavLink
        to="/adsb/packets"
        className={`btn btn-sm btn-icon ${location.pathname.startsWith('/adsb/packets') ? 'btn-primary' : 'btn-outline-light'}`}
        title="Packets"
      >
        <FlightIcon className="icon" />
        <span className="ms-1 d-none d-lg-inline">Packets</span>
      </NavLink>
    </ButtonGroup>
  );

  return (
    <ADSBDataProvider>
      <Layout navLinks={navLinks} buttonGroup={viewButtons}>
        <Outlet />
      </Layout>
    </ADSBDataProvider>
  );
};

export default ADSB;