import React from 'react';
import { ScanText } from 'lucide-react';
import { cn } from '@/lib/utils';


export function MarqueeBannerRenderer({ section, className }: { section: any; className?: string }) {
    const { text, separator } = section.props;
    const styles = section.styles || {};
    
    const displayText = text?.value || 'Marquee Banner Text Here';
    const displaySeparator = separator?.value || '✦';

    return (
        <div 
            className={cn('py-4 overflow-hidden relative', className)}
            style={{ backgroundColor: styles?.backgroundColor || 'var(--wn-primary, #1a1a1a)', color: '#fff' }}
        >

            <div className="flex whitespace-nowrap opacity-70">
                <div className="flex items-center gap-8 pr-8">
                    {[1, 2, 3].map((idx) => (
                        <span key={idx} className="flex items-center gap-8 text-sm font-medium tracking-wide uppercase">
                            {displayText}
                            <span className="opacity-50 text-xs">{displaySeparator}</span>
                        </span>
                    ))}
                </div>
            </div>
            
            {/* Admin Overlay Indicator */}
            <div className="absolute inset-0 flex items-center justify-center bg-black/10 pointer-events-none">
                <div className="bg-background/90 text-foreground text-xs px-2 py-1 rounded shadow-sm border border-border flex items-center gap-1 backdrop-blur-sm">
                    <ScanText className="w-3 h-3" /> Auto-scrolling Banner
                </div>
            </div>
        </div>
    );
}
