<script setup lang="ts">
import { computed, type Slot } from 'vue'
import { useHasSlot } from '../../../composables/useHasSlots'
import FdsIcon from '../../FdsIcon/FdsIcon.vue'
import type { FdsBlockInfoProps } from './types'

const props = withDefaults(defineProps<FdsBlockInfoProps>(), {
  icon: undefined,
  iconSize: 'small',
  heading: undefined,
  dataTestid: undefined,
})

const hasSlot = useHasSlot()

const contentClasses = computed(() => [
  'rounded-md bg-blue_t-100 mb-4',
  !hasSlot.value && 'mb-0!',
  props.iconSize === 'small' && 'p-4',
  props.iconSize === 'small' && hasSlot.value && 'pb-6',
  props.iconSize === 'large' && props.icon && 'p-6',
])

const smallIconSize = 24
const largeIconSize = 48

const autoId = `fds-content-block-${Math.random().toString(36).slice(2, 9)}`
const contentBlockId = computed(() => props.id ?? autoId)

const rootAttrs = computed(() => {
  const attrs: Record<string, string | undefined> = {}
  if (props.dataTestid) {
    attrs['data-testid'] = props.dataTestid
  }
  return attrs as any
})

defineSlots<{
  default?: Slot
  header?: Slot
  headerInfo?: Slot
}>()
</script>

<template>
  <div :id="contentBlockId" :class="contentClasses" v-bind="rootAttrs">
    <!-- Large icon layout: icon left, header + content right -->
    <div v-if="iconSize === 'large' && icon" class="flex items-start gap-4">
      <FdsIcon :name="icon" :size="largeIconSize" class="fill-blue-500" />
      <div class="flex-1">
        <div v-if="heading" class="mb-1">
          <header class="flex items-start justify-between gap-4">
            <h3 class="m-0 text-base font-main font-bold tracking-wide">{{ heading }}</h3>
            <div class="flex items-start gap-3">
              <slot name="headerInfo" />
            </div>
          </header>
        </div>
        <div v-if="hasSlot" class="mb-0-last-child">
          <slot />
        </div>
      </div>
    </div>

    <!-- Small icon or no icon: icon in header only, content below -->
    <div v-else>
      <div v-if="heading" :class="{ 'mb-2': hasSlot }">
        <header class="flex items-start justify-between gap-4">
          <div class="flex items-center gap-3">
            <FdsIcon v-if="icon && iconSize === 'small'" :name="icon" :size="smallIconSize" class="fill-blue-500" />
            <h3 class="m-0 text-base font-main font-bold tracking-wide">{{ heading }}</h3>
          </div>
          <div class="flex items-start gap-3">
            <slot name="headerInfo" />
          </div>
        </header>
      </div>
      <div class="mb-0-last-child">
        <slot />
      </div>
    </div>
  </div>
</template>
