import React, { useState } from 'react';
import { FaChevronDown, FaChevronUp } from 'react-icons/fa';

const Section = ({ title, icon, children, defaultExpanded = true }) => {
  const [isExpanded, setIsExpanded] = useState(defaultExpanded);

  return (
    <div className="mb-8">
      <div 
        className="flex items-center justify-between cursor-pointer mb-4" 
        onClick={() => setIsExpanded(!isExpanded)}
      >
        <h2 className="text-2xl font-bold flex items-center">
          {icon}
          <span className="ml-2">{title}</span>
        </h2>
        <div className="text-gray-500">
          {isExpanded ? <FaChevronUp /> : <FaChevronDown />}
        </div>
      </div>
      {isExpanded && children}
    </div>
  );
};

export default Section;