import React from 'react';
import { ButtonGroup } from 'react-bootstrap';
import Layout from '../components/Layout';
import { NavLink, Outlet, useLocation } from 'react-router';
import { APRSDataProvider } from './aprs/APRSData';
import type { NavLinkItem } from '../types/layout.types';
import './APRS.scss';

interface Props {
  navLinks?: NavLinkItem[];
}

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

  const viewButtons = (
    <ButtonGroup className="aprs-view-switch" size="sm" aria-label="APRS view switch">
      <NavLink
        to="/aprs/packets"
        className={`btn d-none d-lg-inline-block ${location.pathname.startsWith('/aprs/packets') ? 'btn-primary' : 'btn-outline-light'}`}
      >
        Packets
      </NavLink>
    </ButtonGroup>
  );

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

export default APRS;
