<template>
  <div class="bento-grid" :class="gridClass">
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';

interface Props {
  columns?: number;
  gap?: 'sm' | 'md' | 'lg' | 'xl';
  responsive?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  columns: 12,
  gap: 'md',
  responsive: true
});

const gridClass = computed(() => {
  return {
    [`bento-grid--cols-${props.columns}`]: true,
    [`bento-grid--gap-${props.gap}`]: true,
    'bento-grid--responsive': props.responsive
  };
});
</script>

<style scoped lang="scss">
.bento-grid {
  display: grid;
  width: 100%;
  
  // Column configurations
  &--cols-12 {
    grid-template-columns: repeat(12, 1fr);
  }
  
  &--cols-6 {
    grid-template-columns: repeat(6, 1fr);
  }
  
  &--cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  
  &--cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  
  // Gap sizes
  &--gap-sm {
    gap: 0.75rem;
  }
  
  &--gap-md {
    gap: 1.25rem;
  }
  
  &--gap-lg {
    gap: 1.75rem;
  }
  
  &--gap-xl {
    gap: 2.25rem;
  }
  
  // Responsive behavior
  &--responsive {
    @media (max-width: 640px) {
      grid-template-columns: 1fr;
      gap: 1rem;
    }
    
    @media (min-width: 641px) and (max-width: 768px) {
      grid-template-columns: repeat(6, 1fr);
    }
    
    @media (min-width: 769px) and (max-width: 1024px) {
      grid-template-columns: repeat(8, 1fr);
    }
  }
}

// Global Bento Item Classes
:deep(.bento-item) {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

// Size variants
:deep(.bento-item--small) {
  grid-column: span 3;
}

:deep(.bento-item--medium) {
  grid-column: span 4;
}

:deep(.bento-item--large) {
  grid-column: span 6;
}

:deep(.bento-item--xlarge) {
  grid-column: span 8;
}

:deep(.bento-item--full) {
  grid-column: span 12;
}

// Height variants
:deep(.bento-item--tall) {
  grid-row: span 2;
}

:deep(.bento-item--xtall) {
  grid-row: span 3;
}

// Responsive overrides
@media (max-width: 640px) {
  :deep(.bento-item--small),
  :deep(.bento-item--medium),
  :deep(.bento-item--large),
  :deep(.bento-item--xlarge) {
    grid-column: span 12;
  }
}

@media (min-width: 641px) and (max-width: 768px) {
  :deep(.bento-item--small) {
    grid-column: span 3;
  }
  
  :deep(.bento-item--medium),
  :deep(.bento-item--large) {
    grid-column: span 6;
  }
  
  :deep(.bento-item--xlarge) {
    grid-column: span 6;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  :deep(.bento-item--small) {
    grid-column: span 3;
  }
  
  :deep(.bento-item--medium) {
    grid-column: span 4;
  }
  
  :deep(.bento-item--large) {
    grid-column: span 6;
  }
  
  :deep(.bento-item--xlarge) {
    grid-column: span 8;
  }
}
</style>