<script lang="ts">
  import { FormerDrawer } from '@warkypublic/svelix';
  import type { FormerProps, FormRequestType } from '@warkypublic/svelix';
  import type { Snippet } from 'svelte';

  interface Props extends FormerProps<any> {
    title?: string;
    width?: string;
    children?: Snippet<[any]>;
  }

  let {
    title = 'Form',
    opened = $bindable(false),
    values = $bindable<any>(undefined),
    request = $bindable<FormRequestType>('insert'),
    layout = { buttonArea: 'bottom' },
    width = '36rem',
    children: formContent,
    ...rest
  }: Props = $props();
</script>

<FormerDrawer
  bind:opened
  bind:values
  bind:request
  {title}
  {layout}
  {width}
  {...rest}
>
  {#snippet children(state)}
    <div class="space-y-4 p-6">
      {@render formContent?.(state)}
    </div>
  {/snippet}
</FormerDrawer>
