import * as React from "react"
import { motion } from "framer-motion"

import { cn } from "@/lib/utils"

interface SectionProps {
  id: string
  className?: string
  containerClassName?: string
  eyebrow?: string
  title?: string
  description?: string
  children: React.ReactNode
}

export function Section({
  id,
  className,
  containerClassName,
  eyebrow,
  title,
  description,
  children,
}: SectionProps) {
  return (
    <section id={id} className={cn("scroll-mt-20 py-20 md:py-28", className)}>
      <div className={cn("mx-auto w-full max-w-6xl px-5 md:px-8", containerClassName)}>
        {(eyebrow || title || description) && (
          <motion.div
            initial={{ opacity: 0, y: 16 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true, margin: "-80px" }}
            transition={{ duration: 0.5, ease: "easeOut" }}
            className="mb-12 max-w-2xl"
          >
            {eyebrow && (
              <span className="text-sm font-semibold uppercase tracking-widest text-brand">
                {eyebrow}
              </span>
            )}
            {title && (
              <h2 className="mt-2 text-3xl font-semibold tracking-tight text-foreground md:text-4xl">
                {title}
              </h2>
            )}
            {description && (
              <p className="mt-4 text-base leading-relaxed text-muted-foreground">
                {description}
              </p>
            )}
          </motion.div>
        )}
        {children}
      </div>
    </section>
  )
}