// TODO: Remove this file
import { FC } from 'react';
import { Link, Outlet } from 'react-router';
import 'ol/ol.css';

export const App: FC = () => {
  return (
    <div className="h-screen w-screen flex items-stretch">
      <div className="flex flex-col items-stretch gap-1 bg-white p-2 dark:bg-slate-800">
        <NavLink path="basic" title="Basic" />
        <NavLink path="draw" title="Draw" />
        <NavLink path="image/arcgis" title="Image Source (ArcGIS Rest)" />
      </div>
      <div className="flex-1">
        <Outlet />
      </div>
    </div>
  );
};

interface NavLinkProps {
  path: string;
  title: string;
}

const NavLink: FC<NavLinkProps> = ({ path, title }) => {
  return (
    <Link
      className="rounded-lg bg-white p-2 font-medium dark:bg-slate-700 hover:brightness-90 dark:hover:brightness-110"
      to={path}
    >
      {title}
    </Link>
  );
};

export default App;
