import type { ReactNode } from 'react';

interface SectionWrapperProps {
  id: string;
  title: string;
  subtitle?: string;
  children: ReactNode;
  dark?: boolean;
  className?: string;
}

export function SectionWrapper({
  id,
  title,
  subtitle,
  children,
  dark = false,
  className = '',
}: SectionWrapperProps) {
  return (
    <section
      id={id}
      className={`
        ${dark
          ? 'on-dark bg-[#0A1128] text-white relative overflow-hidden'
          : 'bg-white'
        }
        py-16 md:py-20 px-6
        ${className}
      `}
    >
      {dark && (
        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,rgba(108,92,231,0.15),transparent_60%)]" />
      )}
      <div className="relative max-w-7xl mx-auto">
        <div className="mb-10">
          <h2
            className={`
              font-serif font-bold text-3xl md:text-4xl mb-3
              ${dark
                ? 'bg-gradient-to-r from-purple-300 to-blue-300 bg-clip-text text-transparent'
                : 'text-gradient'
              }
            `}
          >
            {title}
          </h2>
          {subtitle && (
            <p
              className={`text-lg ${dark ? 'text-purple-200' : 'text-slate-600'}`}
            >
              {subtitle}
            </p>
          )}
        </div>
        {children}
      </div>
    </section>
  );
}