// @design-system: layout/GlassCard
// Registered at /design-system#glasscard-layout

import type { CSSProperties, ReactNode } from 'react';
import type { VariantProps } from 'class-variance-authority';
import { cn } from '@/lib/cn';
import { glassCardVariants } from './variants';

/** Props for the GlassCard layout component */
export interface GlassCardProps extends VariantProps<typeof glassCardVariants> {
  /** Card content */
  children: ReactNode;
  /** Additional class names */
  className?: string;
  /** Inline styles (use sparingly – for animation keyframes only) */
  style?: CSSProperties;
}

/**
 * GlassCard - frosted-glass surface for premium hero sections.
 *
 * Uses brand-blue-tinted glass tokens. Renders with blur + border + shadow.
 * Supports three padding sizes and three text alignments.
 *
 * @example
 * ```tsx
 * <GlassCard padding="md" align="center">
 *   <p>content</p>
 * </GlassCard>
 * ```
 */
export function GlassCard({ children, tone, padding, align, className, style }: GlassCardProps) {
  return (
    <div
      className={cn(glassCardVariants({ tone, padding, align }), className)}
      style={{ backdropFilter: 'var(--glass-blur-md)', ...style }}
    >
      {children}
    </div>
  );
}