<template>
  <div :class="gridClass">
    <slot />
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  cols: {
    type: [String, Number],
    default: 1,
  },
  md: {
    type: [String, Number],
    default: null,
  },
  lg: {
    type: [String, Number],
    default: null,
  },
  gap: {
    type: [String, Number],
    default: 6,
  },
})

const colMap: Record<string, string> = {
  '1': 'grid-cols-1',
  '2': 'grid-cols-2',
  '3': 'grid-cols-3',
  '4': 'grid-cols-4',
}

const gapMap: Record<string, string> = {
  '4': 'gap-4',
  '6': 'gap-6',
  '8': 'gap-8',
}

const gridClass = computed(() => {
  const baseCols = colMap[String(props.cols)] || colMap['1']
  const mdClass = props.md ? colMap[String(props.md)] : ''
  const lgClass = props.lg ? colMap[String(props.lg)] : ''
  const gapClass = gapMap[String(props.gap)] || gapMap['6']

  const classes = ['grid', baseCols, gapClass]
  if (mdClass) classes.push(`md:${mdClass}`)
  if (lgClass) classes.push(`lg:${lgClass}`)

  return classes.join(' ')
})
</script>
