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

interface GlassProps extends HTMLAttributes<HTMLDivElement> {
  children: ReactNode;
  tone?: "default" | "strong" | "soft";
}

export function GlassSurface({ children, className, tone = "default", ...props }: GlassProps) {
  return (
    <div className={cn("glass-surface", `glass-surface--${tone}`, className)} {...props}>
      {children}
    </div>
  );
}

export function GlassCard({ children, className, tone = "default", ...props }: GlassProps) {
  return (
    <div className={cn("glass-card", `glass-card--${tone}`, className)} {...props}>
      {children}
    </div>
  );
}