import type { HTMLAttributes } from "corvos/plugins/jsx.ts";

import { Icon } from "$/ui/objects/Icon.tsx";

import { Container } from "../layouts/Container.tsx";
import { ActionButton } from "./ActionButton.tsx";
import { Divider } from "./Divider.tsx";
import { Heading } from "./Heading.tsx";

export type Props = HTMLAttributes<"dialog"> & {
	title: string;
	divider?: boolean;
	children?: JSX.Element;
};

export const Dialog = ({ children, title, divider, class: cls, ...props }: Props) => (
	<dialog popover="auto" class:list={["o-dialog is-modal", cls]} closedby="any" {...props}>
		<Container fixed class="o-dialog__content">
			<header class="o-dialog__header">
				<Heading as="h1" class="u-mbs-0" level="xxl">
					{title}
				</Heading>

				<ActionButton
					command="close"
					commandfor={props.id}
					as="button"
					pill
					size="lg"
					level="quiet"
					icon={<Icon icon="x" variant="bold" />}
					class="u-mis-auto"
				/>
			</header>

			{divider && <Divider level="faint" class="o-dialog__divider" />}

			<div class="o-dialog__body">{children}</div>
		</Container>
	</dialog>
);