import clsx, { type ClassValue } from "clsx";

export const GLASS_SURFACE = "glass-surface";
export const GLASS_SURFACE_FLAT = "glass-surface--flat";
export const GLASS_SURFACE_SELECTED = "glass-surface--selected";
export const GLASS_SURFACE_NAV = "glass-surface-nav";

export function glassSurfaceNav(...extra: ClassValue[]) {
  return clsx(GLASS_SURFACE_NAV, extra);
}

export function glassSurface(...extra: ClassValue[]) {
  return clsx(GLASS_SURFACE, extra);
}

export function glassSurfaceFlat(...extra: ClassValue[]) {
  return clsx(GLASS_SURFACE, GLASS_SURFACE_FLAT, extra);
}

export function glassSurfaceSelected(...extra: ClassValue[]) {
  return clsx(GLASS_SURFACE, GLASS_SURFACE_SELECTED, extra);
}

/** Page-level card sections (about, cart, profile, etc.) */
export function glassSurfaceCard(...extra: ClassValue[]) {
  return clsx(GLASS_SURFACE, "rounded-container", extra);
}

/** Nested / secondary card sections with no shadow */
export function glassSurfaceCardFlat(...extra: ClassValue[]) {
  return clsx(GLASS_SURFACE, GLASS_SURFACE_FLAT, "rounded-container", extra);
}