"use client";

import type React from "react";
import { motion, type Variants, useReducedMotion } from "framer-motion";
import { DrawLine } from "./animations/DrawLine";
import { TextDiffuseReveal } from "./animations/TextDiffuseReveal";
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 shouldReduceMotion = useReducedMotion();
  const baseClass = dark ? "ds-section ds-section-dark" : "ds-section";

  const containerVariants: Variants = {
    hidden: {},
    visible: {
      transition: {
        delayChildren: 0.02,
        staggerChildren: 0.08,
      },
    },
  };

  const itemVariants: Variants = {
    hidden: shouldReduceMotion ? { opacity: 0 } : { opacity: 0, y: 18 },
    visible: {
      opacity: 1,
      y: 0,
      transition: shouldReduceMotion
        ? { duration: 0.25, ease: [0.16, 1, 0.3, 1] }
        : {
            type: "spring",
            stiffness: 60,
            damping: 20,
            mass: 0.85,
          },
    },
  };

  return (
    <section id={id} className={baseClass}>
      <div className="ds-section-shell">
        <motion.div
          className="ds-section-header"
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true, amount: 0.2 }}
          variants={containerVariants}
        >
          <div className="ds-section-meta">
            {eyebrow && (
              <motion.p className="ds-eyebrow" variants={itemVariants}>
                {eyebrow}
              </motion.p>
            )}

            <h2 className="ds-section-title">
              <TextDiffuseReveal text={title} />
            </h2>

            {description && (
              <motion.p
                className="ds-section-description"
                variants={itemVariants}
              >
                {description}
              </motion.p>
            )}

            <DrawLine delay={0.16} />
          </div>

          {aside && (
            <motion.aside variants={itemVariants}>{aside}</motion.aside>
          )}
        </motion.div>

        {!disableChildrenAnimation ? (
          <Reveal y={40} duration={0.9} delay={0.12}>
            <div>{children}</div>
          </Reveal>
        ) : (
          <div>{children}</div>
        )}
      </div>
    </section>
  );
};