import { AppShell as MantineAppShell, NavLink, Text } from "@mantine/core";
import type { FC, ReactNode } from "react";
import { useTranslation } from "react-i18next";
import { Outlet, NavLink as RouterNavLink, useLocation } from "react-router";

type AppShellProps = {
	contentAboveOutlet?: ReactNode;
};

const AppShell: FC<AppShellProps> = (props) => {
	const { contentAboveOutlet } = props;
	const { t } = useTranslation();
	const { pathname } = useLocation();
	const items = [
		{ to: "/accounts", label: t("navigation.accounts") },
		{ to: "/settings", label: t("navigation.settings") },
	];

	return (
		<MantineAppShell
			header={{ height: 60 }}
			navbar={{ width: 220, breakpoint: "sm", collapsed: { mobile: true } }}
			padding="md"
		>
			<MantineAppShell.Header className="app-header">
				<Text fw={700}>{t("appName")}</Text>
			</MantineAppShell.Header>
			<MantineAppShell.Navbar p="sm">
				{items.map((item) => (
					<NavLink
						component={RouterNavLink}
						key={item.to}
						to={item.to}
						label={item.label}
						active={pathname.startsWith(item.to)}
					/>
				))}
			</MantineAppShell.Navbar>
			<MantineAppShell.Main>
				{contentAboveOutlet}
				<Outlet />
			</MantineAppShell.Main>
			<nav className="bottom-nav" aria-label={t("appName")}>
				{items.map((item) => (
					<RouterNavLink
						className={pathname.startsWith(item.to) ? "active" : ""}
						key={item.to}
						to={item.to}
					>
						{item.label}
					</RouterNavLink>
				))}
			</nav>
		</MantineAppShell>
	);
};

export { AppShell };