src/components/ui/glass-panel.tsx

'use client';

import { forwardRef } from 'react';
import { motion, type HTMLMotionProps } from 'framer-motion';
import { cn } from '@/lib/utils';

export interface GlassPanelProps extends HTMLMotionProps<'div'> {
  variant?: 'default' | 'elevated' | 'muted';
  withSpecular?: boolean;
  severity?: 'critical' | 'warning' | 'suggestion' | 'success';
}

export const GlassPanel = forwardRef<HTMLDivElement, GlassPanelProps>(
  (
    {
      className,
      variant = 'default',
      withSpecular = false,
      severity,
      children,
      ...props
    },
    ref
  ) => {
    const baseClasses = {
      default: 'glass',
      elevated: 'glass-elevated',
      muted: 'glass-muted',
    };

    const severityClasses = {
      critical: 'glass-critical',
      warning: 'glass-warning',
      suggestion: 'glass-suggestion',
      success: 'glass-success',
    };

    return (
      <motion.div
        ref={ref}
        className={cn(
          'rounded-2xl',
          baseClasses[variant],
          severity && severityClasses[severity],
          withSpecular && 'glass-specular',
          className
        )}
        initial={{ opacity: 0, y: 10 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{
          duration: 0.3,
          ease: [0.25, 0.46, 0.45, 0.94],
        }}
        {...props}
      >
        {children}
      </motion.div>
    );
  }
);

GlassPanel.displayName = 'GlassPanel';