/**
 * Collapsible help — minimal chrome so dashboards stay clean
 */

import React, { useState } from 'react';

type ExpandableSectionProps = {
  title: string;
  summary?: string;
  defaultOpen?: boolean;
  children: React.ReactNode;
  /** compact = smaller trigger, fits under hero or inside cards */
  density?: 'comfortable' | 'compact';
};

export const ExpandableSection: React.FC<ExpandableSectionProps> = ({
  title,
  summary,
  defaultOpen = false,
  children,
  density = 'comfortable',
}) => {
  const [open, setOpen] = useState(defaultOpen);

  const isCompact = density === 'compact';

  return (
    <div
      className={`rounded-xl border border-zinc-200 bg-zinc-50/80 backdrop-blur-sm overflow-hidden transition-colors card-surface ${
        open ? 'border-brand/25' : 'hover:border-zinc-300'
      }`}
    >
      <button
        type="button"
        onClick={() => setOpen((o) => !o)}
        className={`w-full flex items-center justify-between gap-3 text-left transition-colors ${
          isCompact ? 'px-4 py-3' : 'px-5 py-4'
        } hover:bg-white`}
        aria-expanded={open}
      >
        <div className="min-w-0 flex-1">
          <span
            className={`block text-zinc-900 ${
              isCompact ? 'text-sm font-semibold tracking-tight' : 'text-sm font-bold tracking-tight'
            }`}
          >
            {title}
          </span>
          {summary && !open && (
            <span className={`text-secondary/65 block mt-0.5 ${isCompact ? 'text-xs line-clamp-2' : 'text-xs line-clamp-1'}`}>
              {summary}
            </span>
          )}
        </div>
        <svg
          width="18"
          height="18"
          viewBox="0 0 24 24"
          fill="none"
          className={`flex-shrink-0 text-brand transition-transform duration-200 ${open ? 'rotate-180' : ''}`}
          aria-hidden
        >
          <path
            d="M6 9l6 6 6-6"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
          />
        </svg>
      </button>
      {open && (
        <div
          className={`border-t border-zinc-200 text-secondary leading-relaxed space-y-2 ${
            isCompact ? 'px-4 pb-4 pt-3 text-xs' : 'px-5 pb-5 pt-1 text-sm'
          }`}
        >
          {children}
        </div>
      )}
    </div>
  );
};
