import type { BlitzPage } from "blitz";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCreditCard, faUserCircle } from "@fortawesome/pro-regular-svg-icons";

import Layout from "../../core/layouts/layout";

import appLogger from "../../../integrations/logger";
import useRequireOnboarding from "../../core/hooks/use-require-onboarding";

const logger = appLogger.child({ page: "/settings" });

/* eslint-disable react/display-name */
const navigation = [
	{
		name: "Account",
		href: "/settings/account",
		icon: ({ className = "w-8 h-8" }) => (
			<FontAwesomeIcon size="lg" className={className} icon={faUserCircle} />
		),
	},
	{
		name: "Billing",
		href: "/settings/billing",
		icon: ({ className = "w-8 h-8" }) => (
			<FontAwesomeIcon size="lg" className={className} icon={faCreditCard} />
		),
	},
];
/* eslint-enable react/display-name */

const Settings: BlitzPage = () => {
	useRequireOnboarding();

	return (
		<Layout title="Settings">
			<div className="flex flex-col space-y-6 p-6">
				<aside className="py-6 lg:col-span-3">
					<nav className="space-y-1">
						{navigation.map((item) => (
							<a
								key={item.name}
								href={item.href}
								className="border-transparent text-gray-900 hover:bg-gray-50 hover:text-gray-900 group border-l-4 px-3 py-2 flex items-center text-sm font-medium"
							>
								<item.icon className="text-gray-400 group-hover:text-gray-500 flex-shrink-0 -ml-1 mr-3 h-6 w-6" />
								<span className="truncate">{item.name}</span>
							</a>
						))}
					</nav>
				</aside>
			</div>
		</Layout>
	);
};

Settings.authenticate = true;

export default Settings;