import { SiteHeader } from "$/ui/components/SiteHeader.tsx";
import { SplitView } from "$/ui/layouts/SplitView.tsx";
import { SplitViewPanel } from "$/ui/layouts/SplitViewPanel.tsx";
import { Heading } from "$/ui/objects/Heading.tsx";

import type { Props as BaseLayoutProps } from "./BaseLayout.tsx";

import { BaseLayout } from "./BaseLayout.tsx";

export interface Props extends BaseLayoutProps {
	"content"?: JSX.Element;
	"header-end"?: JSX.Element;
}

export const SplitLayout = ({
	children,
	page,
	content,
	"header-end": headerEnd,
	...props
}: Props) => (
	<BaseLayout page={page} {...props}>
		<SiteHeader mode="compact" url={page.url} end={headerEnd}>
			<div class="l-media__block l-media__block--main">
				<Heading class="u-mbs-0 u-elp">{page.data.title}</Heading>
			</div>
		</SiteHeader>

		<SplitView as="main" class="l-container l-container--pad-i l-container--pad-b u-pbs-400">
			<SplitViewPanel sticky side="25" min="200">
				{children}
			</SplitViewPanel>

			<SplitViewPanel>{content}</SplitViewPanel>
		</SplitView>
	</BaseLayout>
);