/**
 * CollapsibleOutputSection
 *
 * Reusable component that wraps tool output in a collapsed-by-default section.
 * Shows a clickable header with label, StatusDot, and chevron toggle.
 */

import React, { memo, useState } from 'react';

import { ChevronDown, ChevronRight } from 'lucide-react';

import { type ItemStatus, StatusDot } from '../BaseItem';

interface CollapsibleOutputSectionProps {
  status: ItemStatus;
  children: React.ReactNode;
  /** Label shown in the header (default: "Output") */
  label?: string;
}

export const CollapsibleOutputSection = memo(
  ({ status, children, label = 'Output' }: CollapsibleOutputSectionProps): React.JSX.Element => {
    const [isExpanded, setIsExpanded] = useState(false);

    return (
      <div>
        <button
          type="button"
          className="mb-1 flex items-center gap-2 text-xs"
          style={{
            color: 'var(--tool-item-muted)',
            background: 'none',
            border: 'none',
            padding: 0,
            cursor: 'pointer',
          }}
          onClick={() => setIsExpanded((prev) => !prev)}
        >
          {isExpanded ? <ChevronDown className="size-3" /> : <ChevronRight className="size-3" />}
          {label}
          <StatusDot status={status} />
        </button>
        {isExpanded && (
          <div
            className="max-h-96 overflow-auto rounded p-3 font-mono text-xs"
            style={{
              backgroundColor: 'var(--code-bg)',
              border: '1px solid var(--code-border)',
              color:
                status === 'error'
                  ? 'var(--tool-result-error-text)'
                  : 'var(--color-text-secondary)',
            }}
          >
            {children}
          </div>
        )}
      </div>
    );
  }
);

CollapsibleOutputSection.displayName = 'CollapsibleOutputSection';
