<!-- Component: Drawer -->
<script lang="ts">
import { Button } from '$shared/shadcn/ui/button';
import {
    Content as DrawerContent,
    Footer as DrawerFooter,
    Header as DrawerHeader,
    Root as DrawerRoot,
    Trigger as DrawerTrigger,
} from '$shared/shadcn/ui/drawer';
import { cn } from '$shared/shadcn/utils/shadcn-utils';
import type { Snippet } from 'svelte';

interface Props {
    isOpen?: boolean;
    trigger?: Snippet<[{ isOpen: boolean; onClick: () => void }]>;
    content?: Snippet<[{ isOpen: boolean; className?: string }]>;
    contentClassName?: string;
}

let { isOpen = $bindable(false), trigger, content, contentClassName }: Props = $props();

function handleClick() {
    isOpen = !isOpen;
}
</script>

<DrawerRoot bind:open={isOpen}>
    <DrawerTrigger>
        {#if trigger}
            {@render trigger({ isOpen, onClick: handleClick })}
        {:else}
            <Button onclick={handleClick}>
                Open
            </Button>
        {/if}
    </DrawerTrigger>
    <DrawerContent>
        {@render content?.({ isOpen, className: cn('min-h-60 px-2 pt-4 pb-8', contentClassName) })}
    </DrawerContent>
</DrawerRoot>
