'use client';
import { ChevronDown } from 'lucide-react';
import { useEffect, useState, type ReactNode } from 'react';
import { t } from '@/i18n';
import { cn } from '@/lib/cn';
/**
* A subtopic block on long chart pages (compare topic tabs, country topic pages). Collapsed blocks keep the
* information visible through `summary` (a compact table of latest values, no charts); expanded blocks mount
* `children` (the charts, which lazy-fetch on scroll). A `#id` hash in the URL (jump nav) opens the block.
* Heading level 3; `id` is the anchor used by `SubtopicJumpNav`.
*/
export function CollapsibleGroup({ id, title, count, defaultOpen = false, summary, children, className }: { id: string; title: ReactNode; count: number; defaultOpen?: boolean; summary: ReactNode; children: ReactNode; className?: string }) {
const [open, setOpen] = useState(defaultOpen);
useEffect(() => {
const check = () => {
if (typeof window !== 'undefined' && window.location.hash === `#${id}`) setOpen(true);
};
check();
window.addEventListener('hashchange', check);
return () => window.removeEventListener('hashchange', check);
}, [id]);
return (
{open ? children : summary}
);
}
/** In-page jump nav for the subtopic blocks: horizontal chip scroller on phones, wrapped on desktop. */
export function SubtopicJumpNav({ items, label, className }: { items: Array<{ id: string; label: string; count: number }>; label?: string; className?: string }) {
if (items.length < 2) return null;
return (
);
}