@props([
    'isGrid' => true,
    'default' => 1,
    'direction' => 'row',
    'sm' => null,
    'md' => null,
    'lg' => null,
    'xl' => null,
    'twoXl' => null,
])

<div {{ $attributes->class([
    'grid' => $isGrid && $direction === 'row',
    $default ? match ($default) {
        1 => $direction === 'row' ? 'grid-cols-1' : 'columns-1',
        2 => $direction === 'row' ? 'grid-cols-2' : 'columns-2',
        3 => $direction === 'row' ? 'grid-cols-3' : 'columns-3',
        4 => $direction === 'row' ? 'grid-cols-4' : 'columns-4',
        5 => $direction === 'row' ? 'grid-cols-5' : 'columns-5',
        6 => $direction === 'row' ? 'grid-cols-6' : 'columns-6',
        7 => $direction === 'row' ? 'grid-cols-7' : 'columns-7',
        8 => $direction === 'row' ? 'grid-cols-8' : 'columns-8',
        9 => $direction === 'row' ? 'grid-cols-9' : 'columns-9',
        10 => $direction === 'row' ? 'grid-cols-10' : 'columns-10',
        11 => $direction === 'row' ? 'grid-cols-11' : 'columns-11',
        12 => $direction === 'row' ? 'grid-cols-12' : 'columns-12',
        default => $default,
    } : null,
    $sm ? match ($sm) {
        1 => $direction === 'row' ? 'sm:grid-cols-1' : 'sm:columns-1',
        2 => $direction === 'row' ? 'sm:grid-cols-2' : 'sm:columns-2',
        3 => $direction === 'row' ? 'sm:grid-cols-3' : 'sm:columns-3',
        4 => $direction === 'row' ? 'sm:grid-cols-4' : 'sm:columns-4',
        5 => $direction === 'row' ? 'sm:grid-cols-5' : 'sm:columns-5',
        6 => $direction === 'row' ? 'sm:grid-cols-6' : 'sm:columns-6',
        7 => $direction === 'row' ? 'sm:grid-cols-7' : 'sm:columns-7',
        8 => $direction === 'row' ? 'sm:grid-cols-8' : 'sm:columns-8',
        9 => $direction === 'row' ? 'sm:grid-cols-9' : 'sm:columns-9',
        10 => $direction === 'row' ? 'sm:grid-cols-10' : 'sm:columns-10',
        11 => $direction === 'row' ? 'sm:grid-cols-11' : 'sm:columns-11',
        12 => $direction === 'row' ? 'sm:grid-cols-12' : 'sm:columns-12',
        default => $sm,
    } : null,
    $md ? match ($md) {
        1 => $direction === 'row' ? 'md:grid-cols-1' : 'md:columns-1',
        2 => $direction === 'row' ? 'md:grid-cols-2' : 'md:columns-2',
        3 => $direction === 'row' ? 'md:grid-cols-3' : 'md:columns-3',
        4 => $direction === 'row' ? 'md:grid-cols-4' : 'md:columns-4',
        5 => $direction === 'row' ? 'md:grid-cols-5' : 'md:columns-5',
        6 => $direction === 'row' ? 'md:grid-cols-6' : 'md:columns-6',
        7 => $direction === 'row' ? 'md:grid-cols-7' : 'md:columns-7',
        8 => $direction === 'row' ? 'md:grid-cols-8' : 'md:columns-8',
        9 => $direction === 'row' ? 'md:grid-cols-9' : 'md:columns-9',
        10 => $direction === 'row' ? 'md:grid-cols-10' : 'md:columns-10',
        11 => $direction === 'row' ? 'md:grid-cols-11' : 'md:columns-11',
        12 => $direction === 'row' ? 'md:grid-cols-12' : 'md:columns-12',
        default => $md,
    } : null,
    $lg ? match ($lg) {
        1 => $direction === 'row' ? 'lg:grid-cols-1' : 'lg:columns-1',
        2 => $direction === 'row' ? 'lg:grid-cols-2' : 'lg:columns-2',
        3 => $direction === 'row' ? 'lg:grid-cols-3' : 'lg:columns-3',
        4 => $direction === 'row' ? 'lg:grid-cols-4' : 'lg:columns-4',
        5 => $direction === 'row' ? 'lg:grid-cols-5' : 'lg:columns-5',
        6 => $direction === 'row' ? 'lg:grid-cols-6' : 'lg:columns-6',
        7 => $direction === 'row' ? 'lg:grid-cols-7' : 'lg:columns-7',
        8 => $direction === 'row' ? 'lg:grid-cols-8' : 'lg:columns-8',
        9 => $direction === 'row' ? 'lg:grid-cols-9' : 'lg:columns-9',
        10 => $direction === 'row' ? 'lg:grid-cols-10' : 'lg:columns-10',
        11 => $direction === 'row' ? 'lg:grid-cols-11' : 'lg:columns-11',
        12 => $direction === 'row' ? 'lg:grid-cols-12' : 'lg:columns-12',
        default => $lg,
    } : null,
    $xl ? match ($xl) {
        1 => $direction === 'row' ? 'xl:grid-cols-1' : 'xl:columns-1',
        2 => $direction === 'row' ? 'xl:grid-cols-2' : 'xl:columns-2',
        3 => $direction === 'row' ? 'xl:grid-cols-3' : 'xl:columns-3',
        4 => $direction === 'row' ? 'xl:grid-cols-4' : 'xl:columns-4',
        5 => $direction === 'row' ? 'xl:grid-cols-5' : 'xl:columns-5',
        6 => $direction === 'row' ? 'xl:grid-cols-6' : 'xl:columns-6',
        7 => $direction === 'row' ? 'xl:grid-cols-7' : 'xl:columns-7',
        8 => $direction === 'row' ? 'xl:grid-cols-8' : 'xl:columns-8',
        9 => $direction === 'row' ? 'xl:grid-cols-9' : 'xl:columns-9',
        10 => $direction === 'row' ? 'xl:grid-cols-10' : 'xl:columns-10',
        11 => $direction === 'row' ? 'xl:grid-cols-11' : 'xl:columns-11',
        12 => $direction === 'row' ? 'xl:grid-cols-12' : 'xl:columns-12',
        default => $xl,
    } : null,
    $twoXl ? match ($twoXl) {
        1 => $direction === 'row' ? '2xl:grid-cols-1' : '2xl:columns-1',
        2 => $direction === 'row' ? '2xl:grid-cols-2' : '2xl:columns-2',
        3 => $direction === 'row' ? '2xl:grid-cols-3' : '2xl:columns-3',
        4 => $direction === 'row' ? '2xl:grid-cols-4' : '2xl:columns-4',
        5 => $direction === 'row' ? '2xl:grid-cols-5' : '2xl:columns-5',
        6 => $direction === 'row' ? '2xl:grid-cols-6' : '2xl:columns-6',
        7 => $direction === 'row' ? '2xl:grid-cols-7' : '2xl:columns-7',
        8 => $direction === 'row' ? '2xl:grid-cols-8' : '2xl:columns-8',
        9 => $direction === 'row' ? '2xl:grid-cols-9' : '2xl:columns-9',
        10 => $direction === 'row' ? '2xl:grid-cols-10' : '2xl:columns-10',
        11 => $direction === 'row' ? '2xl:grid-cols-11' : '2xl:columns-11',
        12 => $direction === 'row' ? '2xl:grid-cols-12' : '2xl:columns-12',
        default => $twoXl,
    } : null,
]) }}>
    {{ $slot }}
</div>