'use client';
import { useMarketOutlookSections, type SectionId } from '@/stores/market-outlook-sections-store';

interface SectionCollapseProps {
  id: SectionId;
  title: string;
  children: React.ReactNode;
  info?: React.ReactNode;
}

export function SectionCollapse({ id, title, children, info }: SectionCollapseProps) {
  const open = useMarketOutlookSections((s) => s.open[id]);
  const toggle = useMarketOutlookSections((s) => s.toggle);

  return (
    <div>
      <div
        role="button"
        tabIndex={0}
        onClick={() => toggle(id)}
        onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggle(id); } }}
        className="flex items-center gap-2 w-full text-left group cursor-pointer"
      >
        <span className={`text-xs text-fg-muted transition-transform duration-200 ${open ? 'rotate-90' : ''}`}>
          ▸
        </span>
        <h3 className="text-base font-semibold text-fg group-hover:text-accent transition-colors">
          {title}
        </h3>
        {info && (
          <span onClick={(e) => e.stopPropagation()} className="inline-flex">
            {info}
          </span>
        )}
      </div>
      {open && <div className="animate-in fade-in duration-200 mt-4">{children}</div>}
    </div>
  );
}