"use client";

import { motion, type HTMLMotionProps } from "framer-motion";
import { useEffect, useState, type ReactNode } from "react";

type AnimatedSectionProps = HTMLMotionProps<"section"> & {
  children: ReactNode;
};

export default function AnimatedSection({ children, className = "", ...props }: AnimatedSectionProps) {
  const [canReveal, setCanReveal] = useState(false);

  useEffect(() => {
    const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    const wide = window.matchMedia("(min-width: 1024px)").matches;
    setCanReveal(wide && !reduced);
  }, []);

  return (
    <motion.section
      {...props}
      className={className}
      initial={canReveal ? { opacity: 0, y: 28 } : false}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, amount: 0.08 }}
      transition={{ duration: 0.75, ease: [0.22, 1, 0.36, 1] }}
    >
      {children}
    </motion.section>
  );
}