---
const { title, showClose, maxWidth, hideByDefault, customClass, offset } =
	Astro.props;

const randomID = customClass || Math.random().toString().replace(".", "");

import XmarkIcon from "@assets/svg/xmark.svg";
---

<style define:vars={{ maxWidth, offset }}>
	.window {
		width: var(--maxWidth);
		top: var(--offset);
		left: var(--offset);
		background: var(--surface1);
		clip-path: var(--clip-window-outer);
		position: absolute;
	}
	.window-inner {
		background-color: #20202c;
		clip-path: var(--clip-window-inner);
	}
	.title-bar {
		user-select: none;
		display: flex;
		justify-content: space-between;
		align-items: stretch;
		height: 42px;
		padding-left: 1rem;
	}
	.title-bar span {
		align-self: center;
	}
	svg {
		fill: var(--text);
		margin: 0;
		padding: 0;
		height: 24px;
	}
	#close {
		background: none;
		color: inherit;
		border: none;
		padding: 0;
		margin: 0;
		width: 50px;
		font: inherit;
		cursor: pointer;
		outline: inherit;
	}
	.window-body {
		gap: 1rem;
		display: flex;
		padding: 0 1rem 1rem 1rem;
		flex-direction: column;
	}
	@media (pointer: coarse) {
		.window {
			position: absolute;
			top: 0px;
			left: 0px;
			margin: 5%;
			width: 90%;
		}
	}
</style>

<div
	class="background"
	id={`window-${randomID}`}
	class="window"
	style={hideByDefault && "display: none;"}
>
	<div class="window" style="max-width: 100%">
		<div class="window-inner">
			<div class="title-bar">
				<span>{title}</span>
				{
					showClose && (
						<button
							id="close"
							aria-label="Close"
							onclick={`document.querySelector("#window-${randomID}").style.display = "none";`}
						>
							<XmarkIcon width="12" height="12" />
						</button>
					)
				}
			</div>
			<div class="window-body">
				<slot />
			</div>
		</div>
	</div>
</div>