"use client";

interface SectionLoaderProps {
  aspectRatio?: string; // e.g. "1351 / 468"
  minHeight?: number;
  blurBackground?: boolean;
}

export default function SectionLoader({
  aspectRatio,
  minHeight = 300,
  blurBackground = true,
}: SectionLoaderProps) {
  return (
    <div
      style={{
        position: "relative",
        width: "100%",
        overflow: "hidden",
        aspectRatio: aspectRatio || undefined,
        minHeight,
        background: "linear-gradient(135deg, #f5eee0 0%, #efe3cc 100%)",
      }}
    >
      {blurBackground && (
        <div
          style={{
            position: "absolute",
            inset: 0,
            backdropFilter: "blur(8px)",
            WebkitBackdropFilter: "blur(8px)",
            background: "rgba(255, 255, 255, 0.15)",
          }}
        />
      )}

      <div
        style={{
          position: "absolute",
          inset: 0,
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        <span
          style={{
            width: 40,
            height: 40,
            borderRadius: "50%",
            border: "4px solid rgba(191, 149, 63, 0.25)",
            borderTopColor: "#bf953f",
            animation: "section-loader-spin 0.8s linear infinite",
            display: "inline-block",
          }}
        />
      </div>

      {/* Inline keyframes — style jsx keeps this scoped without a
          separate CSS file or global stylesheet edit. */}
      <style jsx>{`
        @keyframes section-loader-spin {
          to {
            transform: rotate(360deg);
          }
        }
      `}</style>
    </div>
  );
}