import type React from "react";
import { Reveal } from "./Reveal";

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

export const Section = ({
  id,
  eyebrow,
  title,
  description,
  dark,
  aside,
  children,
  disableChildrenAnimation = false,
}: SectionProps) => {
  const baseClass = dark ? "ds-section ds-section-dark" : "ds-section";
  return (
    <section id={id} className={baseClass}>
      <div className="ds-section-shell">
        <Reveal y={40} duration={0.8}>
          <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>
        </Reveal>
        {!disableChildrenAnimation ? (
          <Reveal y={60} duration={1} delay={0.2}>
            <div>{children}</div>
          </Reveal>
        ) : (
          <div>{children}</div>
        )}
      </div>
    </section>
  );
};