import type { SampleMeta } from '../../../widgets/core';
import { FolderTreeNav } from '../folder-tree-nav';

export const sampleMeta: SampleMeta = {
  id: 'folder-tree-nav-base',
  componentId: 'folder-tree-nav',
  title: 'Folder Tree Nav',
  description: '그룹별 문서 링크를 트리 형태로 펼치고 접을 수 있는 네비게이션 컴포넌트입니다.',
  category: 'Navigation',
  kind: 'base',
  variantLabel: 'Base',
  order: 80,
  features: ['docs'],
};

export function Sample() {
  return (
    <FolderTreeNav
      title="Documents"
      defaultExpandedIds={['guides']}
      groups={[
        {
          id: 'guides',
          label: 'Guides',
          items: [
            { id: 'intro', label: 'Introduction', href: '#intro' },
            { id: 'deploy', label: 'Deployment', href: '#deploy' },
          ],
        },
        {
          id: 'apis',
          label: 'APIs',
          items: [
            { id: 'search', label: 'Search API', href: '#search' },
            { id: 'widgets', label: 'Widget API', href: '#widgets' },
          ],
        },
      ]}
    />
  );
}
