<script lang="ts">
	import * as Dialog from '$lib/components/ui/dialog';
	import * as Sheet from '$lib/components/ui/sheet';
	import { IsMobile } from '$lib/hooks/is-mobile.svelte.js';
	import { cn } from '$lib/utils.js';
	import type { Snippet } from 'svelte';

	interface Props {
		children: Snippet;
		class?: string;
		/** 移动端 Sheet 的方向，默认 bottom */
		side?: 'top' | 'bottom' | 'left' | 'right';
	}

	let { children, class: className, side = 'bottom' }: Props = $props();

	const isMobile = new IsMobile();
</script>

{#if isMobile.current}
	<Sheet.Content
		{side}
		class={cn('max-h-[90vh] overflow-y-auto flex flex-col', className)}
	>
		<!-- 拖拽指示器 (移动端抽屉常见设计) -->
		<div class="mx-auto mt-2 h-1.5 w-12 shrink-0 rounded-full bg-muted"></div>
		{@render children?.()}
	</Sheet.Content>
{:else}
	<Dialog.Content class={cn('max-h-[85vh] overflow-y-auto flex flex-col', className)}>
		{@render children?.()}
	</Dialog.Content>
{/if}
