<script lang="ts">
  import EntityDetailContent from '$lib/components/EntityDetailContent.svelte'
  import * as Sheet from '$lib/components/ui/sheet'

  let { slug, open = $bindable(false) }: { slug: string | null; open?: boolean } = $props()

  // Lets a relation click inside the sheet drill into that entity in place,
  // without closing/reopening. Resets to the externally-requested slug
  // whenever the caller opens the sheet on a different entity.
  let currentSlug = $state(slug)
  $effect(() => {
    currentSlug = slug
  })
</script>

<Sheet.Root bind:open>
  <Sheet.Content side="right" class="w-full p-0 sm:max-w-2xl">
    <Sheet.Header class="sr-only">
      <Sheet.Title>{currentSlug ?? 'Entity detail'}</Sheet.Title>
      <Sheet.Description>Entity detail panel</Sheet.Description>
    </Sheet.Header>
    {#if currentSlug}
      {#key currentSlug}
        <EntityDetailContent slug={currentSlug} onSelectEntity={(s) => (currentSlug = s)} />
      {/key}
    {/if}
  </Sheet.Content>
</Sheet.Root>
