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

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

<style define:vars={{ maxWidth, offset }}>
	.window {
		width: var(--maxWidth);
		top: var(--offset);
		left: var(--offset);
		position: absolute;
	}
	.title-bar {
		.title-bar-text {
			margin-top: 2.5px !important;
		}
		display: flex;
		justify-content: space-between;
		background-color: #313244;
		border-radius: 15px 15px 0 0;
		padding: 9px 18px 9px 18px;
	}
	svg {
		fill: var(--text);
		margin: 0;
		padding: 0;
		height: 24px !important;
	}
	#close {
		background: none;
		color: inherit;
		border: none;
		padding: 0;
		margin: 0;
		height: 24px !important;
		font: inherit;
		cursor: pointer;
		outline: inherit;
	}
	.window-body {
		padding: 20px !important;
		background-color: #1e1e2e;
		border-radius: 0 0 20px 20px;
	}
	@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="title-bar">
			<div class="title-bar-text">{title}</div>
			{
				showClose && (
					<button
						id="close"
						aria-label="Close"
						onclick={`document.querySelector("#window-${randomID}").style.display = "none";`}
					>
						<svg
							xmlns="http://www.w3.org/2000/svg"
							height="24px"
							viewBox="0 -960 960 960"
						>
							<path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" />
						</svg>
					</button>
				)
			}
		</div>
		<div class="window-body">
			<slot />
		</div>
	</div>
</div>