"use client";

import { HTMLAttributes, ReactNode } from "react";

interface BackgroundSectionProps extends HTMLAttributes<HTMLElement> {
  children: ReactNode;
  backgroundImage: string;
  overlay?: boolean;
}

export default function BackgroundSection({
  children,
  backgroundImage,
  overlay = true,
  className = "",
  ...props
}: BackgroundSectionProps) {
  return (
    <section
      className={`relative w-full min-h-screen flex flex-col items-center justify-center overflow-hidden pt-24 pb-16 ${className}`}
      {...props}
    >
      {/* Background Image */}
      <div
        className="fixed inset-0 bg-cover bg-center bg-no-repeat"
        style={{
          backgroundImage: `url('${backgroundImage}')`,
        }}
      >
        {/* Dark overlay for readability */}
        {overlay && (
          <div
            className="absolute inset-0 bg-gradient-to-b"
            style={{
              background: `linear-gradient(to bottom,
                color-mix(in srgb, var(--background) 70%, transparent),
                color-mix(in srgb, var(--background) 60%, transparent),
                color-mix(in srgb, var(--background) 80%, transparent)
              )`,
            }}
          />
        )}
      </div>

      {/* Content */}
      <div className="relative z-10 w-full max-w-6xl mx-auto px-4 sm:px-8 py-16">
        {children}
      </div>
    </section>
  );
}