"use client";
import { motion, useInView } from "framer-motion";
import type { ReactNode } from "react";
import { useRef } from "react";

interface SectionContainerProps {
  children: ReactNode;
  title: string;
  subtitle?: string;
  background?: "white" | "gray" | "gradient" | "dark";
  accent?: "green" | "blue" | "purple" | "amber";
  className?: string;
}

export default function SectionContainer({
  children,
  title,
  subtitle,
  background = "white",
  accent = "green",
  className = "",
}: SectionContainerProps) {
  const ref = useRef<HTMLElement>(null);
  const isInView = useInView(ref, { once: true, margin: "-100px" });

  const bgClasses = {
    white: "bg-white dark:bg-slate-900",
    gray: "bg-slate-50/80 dark:bg-slate-900/50",
    gradient:
      "bg-gradient-to-b from-slate-50 to-white dark:from-slate-900 dark:to-slate-800",
    dark: "bg-[#0a1628] text-white",
  };

  const accentColors = {
    green: "from-brand-green to-emerald-400",
    blue: "from-blue-500 to-cyan-400",
    purple: "from-purple-500 to-violet-400",
    amber: "from-amber-500 to-yellow-400",
  };

  return (
    <section
      ref={ref}
      className={`${bgClasses[background]} py-20 md:py-28 relative overflow-hidden ${className}`}
    >
      {/* Subtle decorative elements */}
      <div className="absolute inset-0 pointer-events-none">
        {/* Top gradient line */}
        <div
          className={`absolute top-0 left-1/2 -translate-x-1/2 w-1/2 h-px bg-gradient-to-r from-transparent via-slate-200 dark:via-slate-700 to-transparent`}
        />
        {/* Corner accents */}
        <motion.div
          initial={{ opacity: 0, scale: 0.8 }}
          animate={isInView ? { opacity: 0.5, scale: 1 } : {}}
          transition={{ duration: 1 }}
          className={`absolute -top-32 -right-32 w-64 h-64 bg-gradient-to-br ${accentColors[accent]} rounded-full blur-[100px] opacity-0`}
        />
      </div>

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={isInView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.7 }}
          className="text-center mb-16"
        >
          {/* Section badge */}
          <motion.div
            initial={{ opacity: 0, scale: 0.9 }}
            animate={isInView ? { opacity: 1, scale: 1 } : {}}
            transition={{ duration: 0.5, delay: 0.1 }}
            className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-brand-green/10 dark:bg-brand-green/20 text-brand-green text-sm font-medium mb-6"
          >
            <span
              className={`w-2 h-2 rounded-full bg-gradient-to-r ${accentColors[accent]}`}
            />
            <span>Featured</span>
          </motion.div>

          {/* Title with gradient underline */}
          <h2 className="text-3xl md:text-4xl lg:text-5xl font-extrabold text-brand-ink dark:text-white mb-4 relative inline-block">
            {title}
            <motion.div
              initial={{ scaleX: 0 }}
              animate={isInView ? { scaleX: 1 } : {}}
              transition={{ duration: 0.8, delay: 0.3 }}
              className={`absolute -bottom-2 left-0 right-0 h-1 bg-gradient-to-r ${accentColors[accent]} rounded-full origin-left`}
            />
          </h2>

          {subtitle && (
            <motion.p
              initial={{ opacity: 0, y: 10 }}
              animate={isInView ? { opacity: 1, y: 0 } : {}}
              transition={{ duration: 0.6, delay: 0.2 }}
              className="text-lg md:text-xl text-slate-600 dark:text-slate-300 max-w-3xl mx-auto mt-6 leading-relaxed"
            >
              {subtitle}
            </motion.p>
          )}
        </motion.div>

        {/* Content */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={isInView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.7, delay: 0.3 }}
        >
          {children}
        </motion.div>
      </div>
    </section>
  );
}