<script setup lang="ts">
const props = defineProps<{
  class?: string
  ux?: any
  reference?: 'self' | 'parent'
  break?: 'sm' | 'md' | 'lg' | 'xl' | '2xl'
  fractions?: '1/1' | '1/2' | '1/3' | '2/1' | '3/1'
}>()

const b = props.break ?? `undefined`

const fr = {
  undefined: ``,
  sm: `@sm:flex-row`,
  md: `@md:flex-row`,
  lg: `@lg:flex-row`,
  xl: `@xl:flex-row`,
  '2xl': `@2xl:flex-row`,
}

const is = {
  undefined: ``,
  sm: `@sm:items-stretch`,
  md: `@md:items-stretch`,
  lg: `@lg:items-stretch`,
  xl: `@xl:items-stretch`,
  '2xl': `@2xl:items-stretch`,
}

const f1 = {
  undefined: ``,
  sm: `@sm:flex-[1_1_0]`,
  md: `@md:flex-[1_1_0]`,
  lg: `@lg:flex-[1_1_0]`,
  xl: `@xl:flex-[1_1_0]`,
  '2xl': `@2xl:flex-[1_1_0]`,
}

const f2 = {
  undefined: ``,
  sm: `@sm:flex-[2_1_0]`,
  md: `@md:flex-[2_1_0]`,
  lg: `@lg:flex-[2_1_0]`,
  xl: `@xl:flex-[2_1_0]`,
  '2xl': `@2xl:flex-[2_1_0]`,
}

const f3 = {
  undefined: ``,
  sm: `@sm:flex-[3_1_0]`,
  md: `@md:flex-[3_1_0]`,
  lg: `@lg:flex-[3_1_0]`,
  xl: `@xl:flex-[3_1_0]`,
  '2xl': `@2xl:flex-[3_1_0]`,
}

const classes = useStyling(
  'containerPair',
  {
    slots: {
      base: 'w-full',
      container: `w-full flex flex-col ${fr[b]} ${is[b]}`,
      left: 'min-w-0 w-full',
      right: 'min-w-0 w-full',
    },
    variants: {
      reference: {
        self: {
          base: '@container',
        },
        parent: {},
      },
      fractions: {
        '1/1': {
          left: f1[b],
          right: f1[b],
        },
        '1/2': {
          left: f1[b],
          right: f2[b],
        },
        '1/3': {
          left: f1[b],
          right: f3[b],
        },
        '2/1': {
          left: f2[b],
          right: f1[b],
        },
        '3/1': {
          left: f3[b],
          right: f1[b],
        },
      },
    },
    defaultVariants: {
      reference: 'self',
      fractions: '1/1',
    },
  },
  props
)
</script>

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

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