import React, { ReactNode } from 'react';

interface FiltersSectionProps {
    children: ReactNode;
    isLoading?: boolean;
    columns?: 1 | 2 | 3 | 4;
    className?: string;
}

export const FiltersSection: React.FC<FiltersSectionProps> = ({
    children,
    isLoading = false,
    columns = 4,
    className = '',
}) => {
    const gridCols = {
        1: 'grid-cols-1',
        2: 'grid-cols-1 md:grid-cols-2',
        3: 'grid-cols-1 md:grid-cols-3',
        4: 'grid-cols-1 md:grid-cols-4',
    };

    return (
        <div className={`bg-white dark:bg-gray-800 shadow-sm border border-gray-200 dark:border-gray-700 rounded-lg p-4 ${className}`}>
            {isLoading ? (
                <div className={`grid ${gridCols[columns]} gap-4 animate-pulse`}>
                    {[...Array(columns)].map((_, i) => (
                        <div key={i}>
                            <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-20 mb-2"></div>
                            <div className="h-10 bg-gray-200 dark:bg-gray-700 rounded-lg"></div>
                        </div>
                    ))}
                </div>
            ) : (
                <div className={`grid ${gridCols[columns]} gap-4`}>
                    {children}
                </div>
            )}
        </div>
    );
};

