"use client";

import { forwardRef } from "react";
import { cn } from "@/lib/utils";

type Blur = "sm" | "md" | "lg";
type Intensity = "subtle" | "default" | "emphasis";

interface GlassContainerProps extends React.HTMLAttributes<HTMLDivElement> {
  blur?: Blur;
  intensity?: Intensity;
  glow?: boolean;
  glowColor?: string;
}

const blurMap: Record<Blur, string> = {
  sm: "blur(8px)",
  md: "blur(12px)",
  lg: "blur(20px)",
};

const intensityMap: Record<Intensity, { bg: string; border: string }> = {
  subtle: {
    bg: "rgba(255,255,255,0.02)",
    border: "rgba(255,255,255,0.06)",
  },
  default: {
    bg: "rgba(255,255,255,0.05)",
    border: "rgba(255,255,255,0.12)",
  },
  emphasis: {
    bg: "rgba(255,255,255,0.08)",
    border: "rgba(255,255,255,0.20)",
  },
};

export const GlassContainer = forwardRef<HTMLDivElement, GlassContainerProps>(
  (
    {
      blur = "md",
      intensity = "default",
      glow = false,
      glowColor,
      className,
      children,
      style,
      ...props
    },
    ref,
  ) => {
    const { bg, border } = intensityMap[intensity];
    const blurVal = blurMap[blur];
    return (
      <div
        ref={ref}
        className={cn("rounded-xl relative overflow-hidden", className)}
        style={{
          backdropFilter: `${blurVal} saturate(1.2)`,
          WebkitBackdropFilter: `${blurVal} saturate(1.2)`,
          background: bg,
          border: `1px solid ${border}`,
          boxShadow: glow
            ? `0 0 40px ${glowColor ?? "rgba(124,58,237,0.30)"}, 0 8px 32px rgba(0,0,0,0.4)`
            : "0 8px 32px rgba(0,0,0,0.3)",
          ...style,
        }}
        {...props}
      >
        {children}
      </div>
    );
  },
);
GlassContainer.displayName = "GlassContainer";
