<script>
	export let is_open = false;
	export let name_editable = false;
	export let name = "";
	export let class_name = "";
	export let on_close = () => {};
</script>

<div
	class="absolute top-0 w-full h-screen z-10 py-4
	max-w-full max-h-full
	flex justify-center items-center
	backdrop-blur-sm
	bg-[#00000022]
	{is_open ? 'opacity-100 visible' : 'invisible opacity-0'}
	transition-all duration-300"
>
	<div
		class="w-[700px] h-full mx-4 flex flex-col
		border-[var(--w-border)] dark:border-[var(--b-border)] border-2 rounded-xl
		bg-[var(--w-bg)] dark:bg-[var(--b-bg)]
		text-[var(--w-text)] dark:text-[var(--b-text)] text-2xl
		overflow-y-auto
		{class_name}"
	>
		<div
			class="ml-2 relative flex flex-initial justify-between items-center"
		>
			{#if name_editable}
				<input
					type="text"
					bind:value={name}
					class="bg-[var(--bg)] w-full focus-visible:outline-none"
				/>
			{:else}
				<p class="bg-[var(--bg)] w-full focus-visible:outline-none">
					{name}
				</p>
			{/if}
			<button
				on:click={() => {
					is_open = false;
					on_close();
				}}
				class="size-[60px] m-2 text-[40px] pb-3">x</button
			>
		</div>
		<slot></slot>
	</div>
</div>
