<script lang="ts">
  import { Button } from '$lib/components/ui/button';

  let { data }: {
    data: { slug: string; url: string; title: string; ssoToken?: string };
  } = $props();

  const iframeSrc = $derived(
    data.ssoToken
      ? `${data.url}${data.url.includes('?') ? '&' : '?'}sso=${data.ssoToken}`
      : data.url
  );
</script>

<svelte:head>
  <title>{data.title} — Base</title>
</svelte:head>

<main class="relative flex-1 min-h-0 min-w-0 flex flex-col">
  <iframe
    id="app-iframe"
    title={data.title}
    src={iframeSrc}
    class="absolute inset-0 w-full h-full border-0 rounded-none"
  />
  <div
    class="absolute top-2 left-1/2 -translate-x-1/2 z-10 flex items-center justify-center pointer-events-none pt-[env(safe-area-inset-top)]"
    aria-hidden="true"
  >
    <div class="pointer-events-auto">
      <a href="/">
        <Button type="button" variant="secondary" class="shadow-md">
          Base
        </Button>
      </a>
    </div>
  </div>
</main>
