"use client";

import type React from "react";
import { motion, Variants } from "framer-motion";
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";

  const itemVariants: Variants = {
    hidden: { opacity: 0, y: 20 },
    visible: { opacity: 1, y: 0, transition: { duration: 0.6, ease: "easeOut" } }
  };

  return (
    <section id={id} className={baseClass}>
      <div className="ds-section-shell">
        <motion.div
          className="ds-section-header"
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true, margin: "-100px" }}
          variants={{
            hidden: {},
            visible: {
              transition: { staggerChildren: 0.15 }
            }
          }}
        >
          <div className="ds-section-meta">
            {eyebrow && (
              <motion.p className="ds-eyebrow" variants={itemVariants}>
                {eyebrow}
              </motion.p>
            )}
            <motion.h2 className="ds-section-title" variants={itemVariants}>
              {title}
            </motion.h2>
            {description && (
              <motion.p className="ds-section-description" variants={itemVariants}>
                {description}
              </motion.p>
            )}
          </div>
          {aside && <motion.aside variants={itemVariants}>{aside}</motion.aside>}
        </motion.div>
        
        {!disableChildrenAnimation ? (
          <Reveal y={60} duration={1} delay={0.2}>
            <div>{children}</div>
          </Reveal>
        ) : (
          <div>{children}</div>
        )}
      </div>
    </section>
  );
};