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

const props = withDefaults(
  defineProps<{
    icon?: string
    headline?: string
    title?: string
    description?: string
    features?: {
      icon?: string
      name: string
      description?: string
    }[]
    links?: any[]
    slot?: string
    align?: 'left' | 'center' | 'right'
  }>(),
  {
    align: 'center',
  },
)
const attrs = useAttrs()
const containerClass = computed(() =>
  cn(
    'gap-16 sm:gap-y-24',
    props.align === 'center'
      ? 'flex flex-col'
      : 'grid lg:grid-cols-2 lg:items-center',
    attrs.containerClass ?? '',
  ),
)

const baseClass = computed(() =>
  twJoin(
    '',
    props.align === 'center' && 'text-center flex flex-col items-center',
    props.align === 'right' && 'lg:order-last',
  ),
)

const featureIcon = 'i-ph:check'
</script>

<template>
  <div :class="cn('py-24 sm:py-32', $attrs.class)">
    <slot name="top" />
    <UiContainer :class="containerClass">
      <div
        v-if="
          icon
            || $slots.icon
            || headline
            || $slots.headline
            || title
            || $slots.title
            || description
            || $slots.description
            || links?.length
            || $slots.links
        "
        :class="baseClass"
      >
        <div v-if="icon || $slots.icon" class="flex mb-6">
          <slot name="icon">
            <div
              :class="(icon as string)"
              class="w-10 h-10 flex-shrink-0 text-primary"
            />
          </slot>
        </div>

        <div
          v-else-if="headline || $slots.headline"
          class="mb-2 text-base/7 font-semibold text-primary"
        >
          <slot name="headline">
            {{ headline }}
          </slot>
        </div>

        <h2
          v-if="title || $slots.title"
          :class="$attrs.titleClass"
          class="text-3xl font-bold tracking-tight text-foreground sm:text-4xl lg:text-5xl"
        >
          <slot name="title">
            {{ title }}
          </slot>
        </h2>

        <slot name="title-bottom" />

        <p
          v-if="description || $slots.description"
          class="mt-6 text-lg/8 text-muted-foreground"
          :class="$attrs.descriptionClass"
        >
          <slot name="description">
            {{ description }}
          </slot>
        </p>

        <dl
          v-if="align !== 'center' && features?.length"
          class="mt-6 leading-7 space-y-4"
        >
          <div
            v-for="feature in features"
            :key="feature.name"
            class="relative pl-8"
          >
            <dt class="font-semibold text-foreground">
              <div
                :class="feature.icon || featureIcon"
                class="absolute left-0 top-1 h-5 w-5 text-primary"
                aria-hidden="true"
              />
              <span v-if="feature.name">{{ feature.name }}</span>
            </dt>
            <dd
              v-if="feature.description"
              class="text-muted-foreground leading-6"
            >
              {{ feature.description }}
            </dd>
          </div>
        </dl>

        <div
          v-if="align !== 'center' && (links?.length || $slots.links)"
          class="mt-8 flex flex-wrap gap-x-3 gap-y-1.5"
        >
          <slot name="links">
            <UiButton
              v-for="(link, index) in links"
              :key="index"
              v-bind="link"
              @click="link.click"
            />
          </slot>
        </div>
      </div>

      <slot v-if="$slots[slot || 'default']" :name="slot || 'default'" />
      <div v-else-if="align === 'right'" />

      <dl
        v-if="align === 'center' && features?.length"
        class="mt-6 leading-7 grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 lg:gap-x-8 lg:gap-y-16"
      >
        <div
          v-for="feature in features"
          :key="feature.name"
          class="relative pl-8"
        >
          <dt class="font-semibold text-foreground">
            <div
              :class="feature.icon || featureIcon"
              class="absolute left-0 top-1 h-5 w-5 text-primary"
              aria-hidden="true"
            />
            <span v-if="feature.name">{{ feature.name }}</span>
          </dt>
          <dd
            v-if="feature.description"
            class="text-muted-foreground leading-6"
          >
            {{ feature.description }}
          </dd>
        </div>
      </dl>

      <div
        v-if="align === 'center' && (links?.length || $slots.links)"
        class="flex flex-wrap gap-x-3 gap-y-1.5 mt-0 justify-center"
      >
        <slot name="links">
          <UiButton
            v-for="(link, index) in links"
            :key="index"
            v-bind="link"
            @click="link.click"
          />
        </slot>
      </div>
    </UiContainer>

    <slot name="bottom" />
  </div>
</template>
