'use client';

interface LivePreviewProps {
  children: React.ReactNode;
  label?: string;
  className?: string;
  showLabel?: boolean;
}

export const LivePreview = ({
  children,
  label = 'Live Example',
  className = '',
  showLabel = true,
}: LivePreviewProps) => {
  return (
    <div
      className="relative bg-slate-900/60 backdrop-blur-sm border border-slate-700/50 rounded-xl overflow-hidden my-4"
      role="region"
      aria-label={label}
    >
      {showLabel && (
        <div className="absolute top-3 left-3 z-10">
          <span className="px-2.5 py-1 bg-purple-500/20 border border-purple-500/30 rounded-md text-xs font-medium text-purple-300">
            {label}
          </span>
        </div>
      )}
      <div className={`${showLabel ? 'pt-12' : ''} p-4 ${className}`}>{children}</div>
    </div>
  );
};
