import React, { useState } from "react";
import "../Style/Expandable.css"

const ExpandableInfo = ({ details }) => {
  const [isExpanded, setIsExpanded] = useState(false);

  const toggleExpand = () => {
    setIsExpanded(!isExpanded);
  };

  return (
    <div className="expandable-info">
      <button onClick={toggleExpand} className="expand-button">
        {isExpanded ? "Скрыть" : "Подробнее"}
      </button>
      {isExpanded && (
        <div className="details-menu">
          {details.map((detail, index) => (
            <div key={index} className="detail-item">
              <span className="label">{detail.label}:</span>
              <span className="value">{detail.value}</span>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

export default ExpandableInfo;