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

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

const spanMap: Record<string, string> = {
  '1': 'col-span-1',
  '2': 'col-span-2',
  '3': 'col-span-3',
  '4': 'col-span-4',
}

const itemClass = computed(() => {
  const classes = [] as string[]
  if (props.md && spanMap[String(props.md)]) classes.push(`md:${spanMap[String(props.md)]}`)
  if (props.lg && spanMap[String(props.lg)]) classes.push(`lg:${spanMap[String(props.lg)]}`)
  return classes.join(' ')
})
</script>
