import React from "react";

/**
 * Wraps dashboard content in a semantic section with optional title and description.
 * @param {string} [title] - Section heading
 * @param {string} [description] - Short description below the title
 * @param {string} [className] - Additional CSS class for the section
 * @param {React.ReactNode} children - Chart(s) or other content
 */
const DashboardSection = ({ title, description, className = "", children }) => {
  const sectionId = title ? `section-${title.replace(/\s+/g, "-").toLowerCase().replace(/[^a-z0-9-]/g, "")}` : null;
  return (
    <section className={`dashboard-section ${className}`.trim()} aria-labelledby={sectionId || undefined}>
      {(title || description) && (
        <div className="dashboard-section-header">
          {title && (
            <h2 id={sectionId} className="dashboard-section-title">
              {title}
            </h2>
          )}
          {description && <p className="dashboard-section-description">{description}</p>}
        </div>
      )}
      <div className="dashboard-section-content">{children}</div>
    </section>
  );
};

export default DashboardSection;
