import React from 'react';

/**
 * FrostedGlass component creates a container with a frosted glass effect
 * using backdrop-filter blur and a semi-transparent white background.
 * 
 * @param {Object} props - Component props
 * @param {ReactNode} props.children - Child elements
 * @param {string} props.className - Additional CSS classes
 * @returns {JSX.Element} FrostedGlass component
 */
const FrostedGlass = ({ children, className = '' }) => {
  return (
    <div 
      className={`bg-white/20 backdrop-blur-md rounded-xl border border-white/30 
                 shadow-lg ${className}`}
    >
      {children}
    </div>
  );
};

export default FrostedGlass;