<template>
  <div
    :class="panelClasses"
    role="complementary"
    :aria-label="title"
  >
    <h3
      v-if="title"
      class="text-titan-green-800 font-work-sans font-medium text-base mb-3"
    >
      {{ title }}
    </h3>
    <ul
      v-if="items.length > 0"
      class="space-y-2 text-titan-green-800 font-work-sans text-xs leading-relaxed"
    >
      <li
        v-for="(item, index) in items"
        :key="index"
        class="flex items-start"
      >
        <span class="inline-block w-1 h-1 rounded-full bg-titan-green-800 mt-1.5 mr-2 flex-shrink-0" aria-hidden="true"></span>
        <span>{{ item }}</span>
      </li>
    </ul>
    <slot v-if="!items.length && !$slots.default"></slot>
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

/**
 * TitanInfoPanel - A component for displaying informational tips and guidance
 *
 * @component
 * @example
 * <TitanInfoPanel
 *   title="Tips for a great photo"
 *   :items="['Use a high resolution image', 'Make sure they\'re facing the camera']"
 * />
 */

interface Props {
  /** The title/heading text for the info panel */
  title?: string
  /** Array of bullet point items to display */
  items?: string[]
  /** Visual variant of the panel */
  variant?: 'default' | 'compact' | 'transparent'
}

const props = withDefaults(defineProps<Props>(), {
  title: '',
  items: () => [],
  variant: 'default'
})

const panelClasses = computed(() => {
  const baseClasses = 'rounded-2xl p-4'

  const variantClasses = {
    default: 'bg-titan-green-800/8 backdrop-blur-sm border border-titan-green-800/18 shadow-sm',
    compact: 'bg-titan-green-800/5 backdrop-blur-sm border border-titan-green-800/10',
    transparent: 'bg-transparent border border-titan-green-800/10'
  }

  return `${baseClasses} ${variantClasses[props.variant]}`
})
</script>

<style scoped>
/* Custom list styling to match Figma design */
ul {
  list-style: none;
  padding-left: 0;
}
</style>