<script lang="ts">
	import type { Snippet } from "svelte";
	import Logo from "./Logo.svelte";

	interface Props {
		title?: string;
		class?: string;
		children?: Snippet;
	}

	let { title, class: className, children }: Props = $props();
</script>

<div
	class={`relative flex aspect-video flex-col gap-6 overflow-hidden rounded-lg border border-border-default bg-background-subtle p-8 ${className ?? ""}`}
>
	<div
		class="pointer-events-none absolute inset-0 bg-[radial-gradient(var(--color-border-strong)_1px,transparent_1px)] bg-[length:12px_12px] [mask-image:linear-gradient(to_bottom,transparent,black)] opacity-60"
		aria-hidden="true"
	></div>
	<div class="relative z-10 flex flex-col gap-6">
		<Logo wordmark />
		{#if children}
			{@render children()}
		{:else if title}
			<span class="text-2xl font-bold text-foreground-default sm:text-3xl">{title}</span>
		{/if}
	</div>
</div>
