<script setup lang="ts">
import { twJoin } from 'tailwind-merge'

const props = withDefaults(
  defineProps<{
    align?: 'top' | 'bottom'
    divider?: string
  }>(),
  {
    divider: '或',
  },
)
const containerClass = twJoin(
  'gap-y-6 flex flex-col',
  props.align === 'top' && 'flex-col-reverse',
)
</script>

<template>
  <div class="w-full space-y-6">
    <div :class="containerClass">
      <div v-if="$slots.providers" class="space-y-3">
        <slot name="providers" />
      </div>

      <UiDivider
        v-if="divider && $slots.providers && $slots.form"
        :label="divider"
      />

      <div v-if="$slots.form" class="space-y-6">
        <slot name="form" />
      </div>
    </div>

    <p
      v-if="$slots.footer"
      class="text-sm text-gray-500 dark:text-gray-400 mt-2"
    >
      <slot name="footer" />
    </p>
  </div>
</template>
