import type { HTMLAttributes, ReactNode } from "react";
import { cn } from "./cn.js";

export type GlassTone = "default" | "strong" | "soft";
export type GlassRadius = "card" | "panel" | "modal" | "pill";
export type GlassPadding = "none" | "sm" | "md" | "lg";

export interface GlassSurfaceProps extends HTMLAttributes<HTMLDivElement> {
  children: ReactNode;
  tone?: GlassTone;
  radius?: GlassRadius;
  padding?: GlassPadding;
  materialRim?: boolean;
}

export function GlassSurface({
  children,
  className,
  tone = "default",
  radius = "card",
  padding = "none",
  materialRim = true,
  ...props
}: GlassSurfaceProps) {
  return (
    <div
      className={cn("nodedc-glass", materialRim && "nodedc-material-rim", className)}
      data-tone={tone}
      data-radius={radius}
      data-padding={padding === "none" ? undefined : padding}
      {...props}
    >
      {children}
    </div>
  );
}

export interface GlassMaterialSurfaceProps extends HTMLAttributes<HTMLDivElement> {
  children: ReactNode;
}

/** Canonical modal/Inspector material. General application panels must not use it. */
export function GlassMaterialSurface({ children, className, ...props }: GlassMaterialSurfaceProps) {
  return <div className={cn("nodedc-glass-material", className)} {...props}>{children}</div>;
}

export interface MapGlassSurfaceProps extends HTMLAttributes<HTMLDivElement> {
  children: ReactNode;
}

/** Light translucent surface used only over Cesium/map imagery. */
export function MapGlassSurface({ children, className, ...props }: MapGlassSurfaceProps) {
  return <div className={cn("nodedc-map-glass", className)} {...props}>{children}</div>;
}