<script lang="ts">
	import type { ExplorerFolder } from '$lib/api';
	import Icon from './Icon.svelte';
	import FolderTree from './FolderTree.svelte';

	let {
		folder,
		folders,
		projects,
		slug,
	}: {
		folder: ExplorerFolder;
		folders: ExplorerFolder[];
		projects: {
			id: string;
			name: string;
			folderId: string | null;
			createdAt: string;
			binding: { chatId: string } | null;
		}[];
		slug: string;
	} = $props();

	let open = $state(true);
</script>

<div>
	<button
		type="button"
		class="flex w-full items-center gap-2.5 px-3 py-2.5 text-left text-sm transition hover:bg-surface-100"
		onclick={() => (open = !open)}
	>
		<span class="w-3.5 text-center text-xs text-surface-600">{open ? '▾' : '▸'}</span>
		<span class="flex h-7 w-7 items-center justify-center border border-warning-300 bg-warning-50 text-warning-800">
			<Icon name="folder" class="h-4 w-4" />
		</span>
		<span class="min-w-0 flex-1 truncate font-medium text-surface-900">{folder.name}</span>
		<span class="saas-badge-neutral">{folder.projectCount} 项目</span>
		{#if folder.childFolderCount > 0}
			<span class="saas-badge-neutral">{folder.childFolderCount} 子夹</span>
		{/if}
	</button>
	{#if open}
		<div class="ml-4 border-l border-surface-300 pl-2">
			<FolderTree {folders} {projects} parentId={folder.id} {slug} />
		</div>
	{/if}
</div>
