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

export function BentoCategoryGridRenderer({ section, className }: { section: any; className?: string }) {
    const { title, items } = section.props;
    const styles = section.styles || {};
    const elementStyles = section.elementStyles || {};
    
    const displayTitle = title?.value || 'Categories';

    return (
        <div 
            className={cn('py-8 px-4', className)}
        >
            <div className="max-w-4xl mx-auto">
                {displayTitle && (
                    <h2 
                        className="text-2xl font-bold mb-6"
                        style={{ color: elementStyles?.title?.color }}
                    >
                        {displayTitle}
                    </h2>
                )}
                <div className="grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-4 auto-rows-auto opacity-70">
                    <div className="col-span-2 row-span-2 min-h-[200px] bg-indigo-100 rounded-xl border-2 border-indigo-200 border-dashed flex items-center justify-center p-4">
                        <span className="font-semibold text-indigo-800 text-center">Bento Grid Item (Large)</span>
                    </div>
                    <div className="col-span-2 row-span-1 min-h-[100px] bg-rose-100 rounded-xl border-2 border-rose-200 border-dashed flex items-center justify-center p-4">
                        <span className="font-semibold text-rose-800 text-center">Bento Grid Item (Medium)</span>
                    </div>
                    <div className="col-span-1 row-span-1 min-h-[100px] bg-amber-100 rounded-xl border-2 border-amber-200 border-dashed flex items-center justify-center p-4">
                        <span className="font-semibold text-amber-800 text-center text-sm">Item (Small)</span>
                    </div>
                    <div className="col-span-1 row-span-1 min-h-[100px] bg-emerald-100 rounded-xl border-2 border-emerald-200 border-dashed flex items-center justify-center p-4">
                        <span className="font-semibold text-emerald-800 text-center text-sm">Item (Small)</span>
                    </div>
                </div>
                <p className="text-center text-xs text-muted-foreground mt-4 italic">Grid items configured in inspector panel</p>
            </div>
        </div>
    );
}
