import type React from "react";

interface SectionProps {
  id?: string;
  eyebrow?: string;
  title: string;
  description?: string;
  dark?: boolean;
  aside?: React.ReactNode;
  children: React.ReactNode;
}

export const Section = ({
  id,
  eyebrow,
  title,
  description,
  dark,
  aside,
  children,
}: SectionProps) => {
  const baseClass = dark ? "ds-section ds-section-dark" : "ds-section";
  return (
    <section id={id} className={baseClass}>
      <div className="ds-section-shell">
        <div className="ds-section-header">
          <div className="ds-section-meta">
            {eyebrow && <p className="ds-eyebrow">{eyebrow}</p>}
            <h2 className="ds-section-title">{title}</h2>
            {description && (
              <p className="ds-section-description">{description}</p>
            )}
          </div>
          {aside && <aside>{aside}</aside>}
        </div>
        <div>{children}</div>
      </div>
    </section>
  );
};