<script setup lang="ts">
const props = defineProps<{
  class?: string
  ux?: any
  hero?: 'top' | 'left'
  buttons?: 'hero' | 'bottom' | 'right'
  break?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl'
  buttonsBreak?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl'
}>()

const b = props.break ?? 'undefined'
const bb = props.buttonsBreak ?? 'undefined'

const rsf = {
  undefined: '',
  sm: '@sm:row-span-full',
  md: '@md:row-span-full',
  lg: '@lg:row-span-full',
  xl: '@xl:row-span-full',
  '2xl': '@2xl:row-span-full',
  '3xl': '@3xl:row-span-full',
  '4xl': '@4xl:row-span-full',
  '5xl': '@5xl:row-span-full',
}

const csf = {
  undefined: '',
  sm: '@sm:col-span-full',
  md: '@md:col-span-full',
  lg: '@lg:col-span-full',
  xl: '@xl:col-span-full',
  '2xl': '@2xl:col-span-full',
  '3xl': '@3xl:col-span-full',
  '4xl': '@4xl:col-span-full',
  '5xl': '@5xl:col-span-full',
}

const r1 = {
  undefined: '',
  sm: '@sm:row-1',
  md: '@md:row-1',
  lg: '@lg:row-1',
  xl: '@xl:row-1',
  '2xl': '@2xl:row-1',
  '3xl': '@3xl:row-1',
  '4xl': '@4xl:row-1',
  '5xl': '@5xl:row-1',
}

const r2 = {
  undefined: '',
  sm: '@sm:row-2',
  md: '@md:row-2',
  lg: '@lg:row-2',
  xl: '@xl:row-2',
  '2xl': '@2xl:row-2',
  '3xl': '@3xl:row-2',
  '4xl': '@4xl:row-2',
  '5xl': '@5xl:row-2',
}

const c1 = {
  undefined: '',
  sm: '@sm:col-1',
  md: '@md:col-1',
  lg: '@lg:col-1',
  xl: '@xl:col-1',
  '2xl': '@2xl:col-1',
  '3xl': '@3xl:col-1',
  '4xl': '@4xl:col-1',
  '5xl': '@5xl:col-1',
}

const c2 = {
  undefined: '',
  sm: '@sm:col-2',
  md: '@md:col-2',
  lg: '@lg:col-2',
  xl: '@xl:col-2',
  '2xl': '@2xl:col-2',
  '3xl': '@3xl:col-2',
  '4xl': '@4xl:col-2',
  '5xl': '@5xl:col-2',
}

const c3 = {
  undefined: '',
  sm: '@sm:col-3',
  md: '@md:col-3',
  lg: '@lg:col-3',
  xl: '@xl:col-3',
  '2xl': '@2xl:col-3',
  '3xl': '@3xl:col-3',
  '4xl': '@4xl:col-3',
  '5xl': '@5xl:col-3',
}

const gra1 = {
  undefined: '',
  sm: '@sm:grid-rows-[auto_1fr]',
  md: '@md:grid-rows-[auto_1fr]',
  lg: '@lg:grid-rows-[auto_1fr]',
  xl: '@xl:grid-rows-[auto_1fr]',
  '2xl': '@2xl:grid-rows-[auto_1fr]',
  '3xl': '@3xl:grid-rows-[auto_1fr]',
  '4xl': '@4xl:grid-rows-[auto_1fr]',
  '5xl': '@5xl:grid-rows-[auto_1fr]',
}

const gc1m = {
  undefined: '',
  sm: '@sm:grid-cols-[1fr_auto]',
  md: '@md:grid-cols-[1fr_auto]',
  lg: '@lg:grid-cols-[1fr_auto]',
  xl: '@xl:grid-cols-[1fr_auto]',
  '2xl': '@2xl:grid-cols-[1fr_auto]',
  '3xl': '@3xl:grid-cols-[1fr_auto]',
  '4xl': '@4xl:grid-cols-[1fr_auto]',
  '5xl': '@5xl:grid-cols-[1fr_auto]',
}

const gr1m = {
  undefined: '',
  sm: '@sm:grid-rows-[1fr_auto]',
  md: '@md:grid-rows-[1fr_auto]',
  lg: '@lg:grid-rows-[1fr_auto]',
  xl: '@xl:grid-rows-[1fr_auto]',
  '2xl': '@2xl:grid-rows-[1fr_auto]',
  '3xl': '@3xl:grid-rows-[1fr_auto]',
  '4xl': '@4xl:grid-rows-[1fr_auto]',
  '5xl': '@5xl:grid-rows-[1fr_auto]',
}

const gca1 = {
  undefined: '',
  sm: '@sm:grid-cols-[auto_1fr]',
  md: '@md:grid-cols-[auto_1fr]',
  lg: '@lg:grid-cols-[auto_1fr]',
  xl: '@xl:grid-cols-[auto_1fr]',
  '2xl': '@2xl:grid-cols-[auto_1fr]',
  '3xl': '@3xl:grid-cols-[auto_1fr]',
  '4xl': '@4xl:grid-cols-[auto_1fr]',
  '5xl': '@5xl:grid-cols-[auto_1fr]',
}

const gr1 = {
  undefined: '',
  sm: '@sm:grid-rows-1',
  md: '@md:grid-rows-1',
  lg: '@lg:grid-rows-1',
  xl: '@xl:grid-rows-1',
  '2xl': '@2xl:grid-rows-1',
  '3xl': '@3xl:grid-rows-1',
  '4xl': '@4xl:grid-rows-1',
  '5xl': '@5xl:grid-rows-1',
}

const gca1m = {
  undefined: '',
  sm: '@sm:grid-cols-[auto_1fr_auto]',
  md: '@md:grid-cols-[auto_1fr_auto]',
  lg: '@lg:grid-cols-[auto_1fr_auto]',
  xl: '@xl:grid-cols-[auto_1fr_auto]',
  '2xl': '@2xl:grid-cols-[auto_1fr_auto]',
  '3xl': '@3xl:grid-cols-[auto_1fr_auto]',
  '4xl': '@4xl:grid-cols-[auto_1fr_auto]',
  '5xl': '@5xl:grid-cols-[auto_1fr_auto]',
}

const classes = useStyling(
  'containerHeroContentButton',
  {
    slots: {
      base: 'w-full @container',
      grid: 'w-full grid grid-rows-[auto_1fr_auto] grid-cols-1',
      hero: 'row-1',
      content: 'row-2',
      buttons: 'flex row-3',
    },
    variants: {
      hero: {
        top: {},
        left: {},
      },
      buttons: {
        hero: {},
        bottom: {},
        right: {},
      },
    },
    compoundVariants: [
      {
        hero: 'top',
        buttons: 'hero',
        class: {
          grid: `${gra1[bb]} ${gc1m[bb]}`,
          hero: `${c1[bb]}`,
          content: `${csf[bb]}`,
          buttons: `${r1[bb]} ${c2[bb]}`,
        },
      },
      {
        hero: 'top',
        buttons: 'bottom',
        class: {},
      },
      {
        hero: 'top',
        buttons: 'right',
        class: {
          grid: `${gra1[bb]} ${gc1m[bb]}`,
          hero: `${csf[bb]}`,
          content: `${c1[bb]}`,
          buttons: `${r2[bb]} ${c2[bb]}`,
        },
      },
      {
        hero: 'left',
        buttons: 'hero',
        class: {
          grid: `${gr1m[b]} ${gr1m[bb]} ${gca1[b]} ${gca1[bb]}`,
          hero: `${r1[b]} ${c1[b]}`,
          content: `${r1[b]} ${rsf[bb]} ${c2[b]} ${c2[bb]}`,
          buttons: `${r2[b]} ${r2[bb]} ${csf[b]} ${c1[bb]}`,
        },
      },
      {
        hero: 'left',
        buttons: 'bottom',
        class: {
          grid: `${gr1m[b]} ${gr1m[bb]} ${gca1[b]} ${gca1[bb]}`,
          hero: `${r1[b]} ${rsf[bb]} ${c1[b]} ${c1[bb]}`,
          content: `${r1[b]} ${r1[bb]} ${c2[b]} ${c2[bb]}`,
          buttons: `${r2[b]} ${r2[bb]} ${csf[b]} ${c2[bb]}`,
        },
      },
      {
        hero: 'left',
        buttons: 'right',
        class: {
          grid: `${gr1m[b]} ${gr1[bb]} ${gca1[b]} ${gca1m[bb]}`,
          hero: `${r1[b]} ${r1[bb]} ${c1[b]} ${c1[bb]}`,
          content: `${r1[b]} ${r1[bb]} ${c2[b]} ${c2[bb]}`,
          buttons: `${r2[b]} ${r1[bb]} ${csf[b]} ${c3[bb]}`,
        },
      },
    ],
    defaultVariants: {
      hero: 'left',
      buttons: 'bottom',
    },
  },
  props
)
</script>

<template>
  <div :class="classes.base">
    <div :class="classes.grid">
      <div :class="classes.hero">
        <slot name="hero" />
      </div>

      <div :class="classes.content">
        <slot />
      </div>

      <div :class="classes.buttons" v-if="$slots.buttons">
        <slot name="buttons" />
      </div>
    </div>
  </div>
</template>
