<script lang="ts">
	import type { Session } from '@ory/client';
	import { Modal } from 'flowbite-svelte';

	interface Props {
		session: Session | null;
		onClose: () => void;
	}

	let { session, onClose }: Props = $props();

	let open = $derived(!!session);
</script>

<Modal
	bind:open
	onclose={onClose}
	size="xl"
	autoclose={false}
	dismissable={false}
	outsideclose={false}
>
	{#snippet header()}
		<h3 class="text-lg leading-6 font-medium text-gray-900">Session Details</h3>
	{/snippet}

	<div class="rounded-lg bg-gray-50 p-4">
		<pre class="overflow-x-auto text-sm text-gray-800">{JSON.stringify(session, null, 2)}</pre>
	</div>

	{#snippet footer()}
		<button
			type="button"
			onclick={onClose}
			class="rounded-md bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none"
		>
			Close
		</button>
	{/snippet}
</Modal>
