"use client";

import { useState } from "react";

interface StageDetailsProps {
  children: React.ReactNode;
  openLabel?: string;
  closeLabel?: string;
}

export function StageDetails({
  children,
  openLabel = "Раскрыть всё",
  closeLabel = "Свернуть",
}: StageDetailsProps) {
  // Изначально РАСКРЫТО (запрос Anton 2026-07-02): полный отчёт виден сразу,
  // «Свернуть» — для компактного просмотра. Leaflet-карты монтируются сразу.
  const [open, setOpen] = useState(true);

  return (
    <>
      <button
        type="button"
        aria-expanded={open}
        onClick={() => setOpen((prev) => !prev)}
        style={{
          width: "100%",
          padding: "10px 14px",
          border: "1px solid var(--border-card)",
          borderRadius: 8,
          background: "var(--bg-card-alt)",
          color: "var(--accent)",
          fontSize: 13,
          fontWeight: 500,
          cursor: "pointer",
          textAlign: "center",
          marginTop: 16,
        }}
      >
        {open ? closeLabel : openLabel}
        {open ? " ▴" : " ▾"}
      </button>
      {open && <div style={{ marginTop: 16 }}>{children}</div>}
    </>
  );
}
