import React, { ReactNode } from 'react';
import styles from './ListCardsGrid.module.scss';

interface ListCardsGridProps {
    children: ReactNode;
    variant?: 'default' | 'compact' | 'wide' | 'horizontal';
    className?: string;
}

export function ListCardsGrid({
    children,
    variant = 'default',
    className = '',
}: ListCardsGridProps) {
    const gridClass = [
        styles.listCardsGrid,
        variant === 'compact' && styles.compact,
        variant === 'wide' && styles.wide,
        variant === 'horizontal' && styles.horizontal,
        className,
    ]
        .filter(Boolean)
        .join(' ');

    return <div className={gridClass}>{children}</div>;
}