<template>
  <div>
    <label v-if="label" class="block text-xs font-bold uppercase text-titan-green-800 mb-2">
      {{ label }}
    </label>
    <div class="flex flex-col gap-2">
      <button
        v-for="option in options"
        :key="option.value"
        type="button"
        @click="!option.disabled && handleSelect(option)"
        :class="[
          getStateClasses(option).base,
          getStateClasses(option).state,
          getStateClasses(option).disabled
        ]"
        v-bind="getOptionAriaAttributes(option)"
      >
        <div
          v-if="!multiple"
          class="flex items-start gap-3"
          data-testid="stacked-radio-layout"
        >
          <div
            class="mt-1 w-5 h-5 rounded-full border-2 flex items-center justify-center flex-shrink-0"
            :class="isSelected(option) ? 'border-white bg-white' : 'border-current'"
          >
            <div
              v-if="isSelected(option)"
              class="w-2.5 h-2.5 rounded-full bg-titan-purple-500"
            ></div>
          </div>
          <div class="flex-1 text-left">
            <div class="font-semibold">{{ option.title || option.label }}</div>
            <div class="text-sm opacity-90 mt-1">{{ option.description || option.label }}</div>
          </div>
        </div>
        <div
          v-else
          class="flex items-start gap-3"
          data-testid="stacked-checkbox-layout"
        >
          <div
            class="mt-1 w-5 h-5 border-2 flex items-center justify-center flex-shrink-0"
            :class="isSelected(option) ? 'border-white bg-white' : 'border-current'"
          >
            <svg
              v-if="isSelected(option)"
              class="w-3 h-3 text-titan-purple-500"
              viewBox="0 0 12 12"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M2 6L5 9L10 3"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
            </svg>
          </div>
          <div class="flex-1 text-left">
            <div class="font-semibold">{{ option.title || option.label }}</div>
            <div class="text-sm opacity-90 mt-1">{{ option.description || option.label }}</div>
          </div>
        </div>
      </button>
    </div>
    <p v-if="error && errorMessage" class="mt-2 text-sm text-red-600">
      {{ errorMessage }}
    </p>
  </div>
</template>

<script setup lang="ts">
/**
 * TitanStackedSelectRenderer - A presentational component that renders select options as full-width
 * stacked cards with title/description layout, using radio-style indicators for
 * single-select and checkbox-style indicators for multi-select.
 *
 * This is a pure presentational component that receives all logic via props (isSelected, handleSelect,
 * getStateClasses, getOptionAriaAttributes). It does not manage state or contain selection logic.
 *
 * Visual Design:
 * - Each option is rendered as a full-width card with title and description
 * - Single-select: Radio indicator (white circular border with purple inner dot when selected)
 * - Multi-select: Checkbox indicator (square with purple checkmark when selected)
 * - Selected state: Purple background (titan-purple-500) with white text and white indicator border
 * - Unselected state: Light green background (titan-green-800/10) with green text and green indicator border
 * - Disabled options show reduced opacity and prevent interaction
 *
 * @example
 * ```vue
 * <TitanStackedSelectRenderer
 *   :options="[
 *     {
 *       value: 'traditional-religious',
 *       label: 'traditional-religious',
 *       title: 'Traditional religious service',
 *       description: 'A religious ceremony at a place of worship.'
 *     },
 *     {
 *       value: 'celebration-of-life',
 *       label: 'celebration-of-life',
 *       title: 'Celebration of life',
 *       description: 'A personalized gathering focused on celebrating the life lived.'
 *     }
 *   ]"
 *   label="WITH A:"
 *   :isSelected="(option) => option.value === selectedValue"
 *   :handleSelect="(option) => { selectedValue = option.value }"
 *   :getStateClasses="(option) => getStateClasses(option, selectedValue)"
 *   :getOptionAriaAttributes="(option) => getAriaAttrs(option, selectedValue)"
 * />
 * ```
 */
import type { SelectRendererProps, StackedSelectOption } from '@/types/components'

interface Props extends SelectRendererProps<StackedSelectOption> {}

defineProps<Props>()
</script>
