import type { Meta, StoryObj } from '@storybook/vue3';
import { ref } from 'vue';
import TitanIconSelect from './TitanIconSelect.vue';

const meta = {
  component: TitanIconSelect,
  title: 'UI/TitanIconSelect',
  tags: ['autodocs'],
  argTypes: {
    modelValue: {
      control: 'text',
      description: 'The currently selected option value (v-model)',
      table: {
        type: { summary: 'string' },
      },
    },
    options: {
      control: 'object',
      description: 'Array of option objects with value and label properties',
      table: {
        type: { summary: 'IconSelectOption[]' },
      },
    },
    name: {
      control: 'text',
      description: 'Name attribute for the radio input group',
      table: {
        type: { summary: 'string' },
      },
    },
    disabled: {
      control: 'boolean',
      description: 'Whether the entire select is disabled',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: false },
      },
    },
    required: {
      control: 'boolean',
      description: 'Whether selection is required',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: false },
      },
    },
    error: {
      control: 'boolean',
      description: 'Whether the select has an error state',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: false },
      },
    },
    showCheckmark: {
      control: 'boolean',
      description: 'Whether to show a checkmark (✓) on the selected option\'s label',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: false },
      },
    },
    'onUpdate:modelValue': {
      action: 'update:modelValue',
      description: 'Emitted when selection changes',
      table: {
        category: 'Events',
        type: { summary: '(value: string) => void' },
      },
    },
  },
} satisfies Meta<typeof TitanIconSelect>;

export default meta;
type Story = StoryObj<typeof meta>;

/**
 * Default memorialization preference selector with three options.
 * Each option displays an icon (via slot) and a label.
 */
export const Default: Story = {
  render: (args) => ({
    components: { TitanIconSelect },
    setup() {
      const value = ref<string>('');
      return { args, value };
    },
    template: `
      <TitanIconSelect v-bind="args" v-model="value">
        <template #icon-buried>
          <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full h-full">
            <path d="M32 8C25.3726 8 20 13.3726 20 20V24H16V56H48V24H44V20C44 13.3726 38.6274 8 32 8Z" fill="currentColor"/>
            <rect x="20" y="28" width="24" height="4" fill="white" opacity="0.3"/>
          </svg>
        </template>
        <template #icon-cremated>
          <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full h-full">
            <path d="M32 12C28 12 24 14 24 18V20H22C20 20 18 22 18 24V50C18 52 20 54 22 54H42C44 54 46 52 46 50V24C46 22 44 20 42 20H40V18C40 14 36 12 32 12Z" fill="currentColor"/>
            <ellipse cx="32" cy="18" rx="6" ry="3" fill="currentColor" opacity="0.5"/>
          </svg>
        </template>
        <template #icon-other>
          <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full h-full">
            <path d="M32 10C28 10 26 14 26 18C26 22 28 24 32 24C32 20 34 18 36 16C38 14 40 12 40 8C40 6 38 4 36 4C34 4 32 6 32 10Z" fill="currentColor"/>
            <path d="M24 16C22 16 20 18 20 20C20 24 22 26 26 26C26 22 28 20 30 18C32 16 34 14 34 10C34 8 32 6 30 6C28 6 24 10 24 16Z" fill="currentColor" opacity="0.7"/>
            <path d="M40 16C38 16 36 18 36 20C36 24 38 26 42 26C42 22 44 20 46 18C48 16 50 14 50 10C50 8 48 6 46 6C44 6 40 10 40 16Z" fill="currentColor" opacity="0.7"/>
          </svg>
        </template>
      </TitanIconSelect>
    `,
  }),
  args: {
    name: 'memorialization',
    options: [
      { value: 'buried', label: 'Buried' },
      { value: 'cremated', label: 'Cremated' },
      { value: 'other', label: 'Other' },
    ],
  },
};

/**
 * Icon select with a pre-selected value.
 */
export const WithValue: Story = {
  render: (args) => ({
    components: { TitanIconSelect },
    setup() {
      const value = ref<string>('buried');
      return { args, value };
    },
    template: `
      <TitanIconSelect v-bind="args" v-model="value">
        <template #icon-buried>
          <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full h-full">
            <path d="M32 8C25.3726 8 20 13.3726 20 20V24H16V56H48V24H44V20C44 13.3726 38.6274 8 32 8Z" fill="currentColor"/>
            <rect x="20" y="28" width="24" height="4" fill="white" opacity="0.3"/>
          </svg>
        </template>
        <template #icon-cremated>
          <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full h-full">
            <path d="M32 12C28 12 24 14 24 18V20H22C20 20 18 22 18 24V50C18 52 20 54 22 54H42C44 54 46 52 46 50V24C46 22 44 20 42 20H40V18C40 14 36 12 32 12Z" fill="currentColor"/>
            <ellipse cx="32" cy="18" rx="6" ry="3" fill="currentColor" opacity="0.5"/>
          </svg>
        </template>
        <template #icon-other>
          <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full h-full">
            <path d="M32 10C28 10 26 14 26 18C26 22 28 24 32 24C32 20 34 18 36 16C38 14 40 12 40 8C40 6 38 4 36 4C34 4 32 6 32 10Z" fill="currentColor"/>
            <path d="M24 16C22 16 20 18 20 20C20 24 22 26 26 26C26 22 28 20 30 18C32 16 34 14 34 10C34 8 32 6 30 6C28 6 24 10 24 16Z" fill="currentColor" opacity="0.7"/>
            <path d="M40 16C38 16 36 18 36 20C36 24 38 26 42 26C42 22 44 20 46 18C48 16 50 14 50 10C50 8 48 6 46 6C44 6 40 10 40 16Z" fill="currentColor" opacity="0.7"/>
          </svg>
        </template>
      </TitanIconSelect>
    `,
  }),
  args: {
    name: 'memorialization',
    options: [
      { value: 'buried', label: 'Buried' },
      { value: 'cremated', label: 'Cremated' },
      { value: 'other', label: 'Other' },
    ],
  },
};

/**
 * Icon select with checkmark displayed on selected option.
 */
export const WithCheckmark: Story = {
  render: (args) => ({
    components: { TitanIconSelect },
    setup() {
      const value = ref<string>('cremated');
      return { args, value };
    },
    template: `
      <TitanIconSelect v-bind="args" v-model="value">
        <template #icon-buried>
          <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full h-full">
            <path d="M32 8C25.3726 8 20 13.3726 20 20V24H16V56H48V24H44V20C44 13.3726 38.6274 8 32 8Z" fill="currentColor"/>
            <rect x="20" y="28" width="24" height="4" fill="white" opacity="0.3"/>
          </svg>
        </template>
        <template #icon-cremated>
          <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full h-full">
            <path d="M32 12C28 12 24 14 24 18V20H22C20 20 18 22 18 24V50C18 52 20 54 22 54H42C44 54 46 52 46 50V24C46 22 44 20 42 20H40V18C40 14 36 12 32 12Z" fill="currentColor"/>
            <ellipse cx="32" cy="18" rx="6" ry="3" fill="currentColor" opacity="0.5"/>
          </svg>
        </template>
        <template #icon-other>
          <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full h-full">
            <path d="M32 10C28 10 26 14 26 18C26 22 28 24 32 24C32 20 34 18 36 16C38 14 40 12 40 8C40 6 38 4 36 4C34 4 32 6 32 10Z" fill="currentColor"/>
            <path d="M24 16C22 16 20 18 20 20C20 24 22 26 26 26C26 22 28 20 30 18C32 16 34 14 34 10C34 8 32 6 30 6C28 6 24 10 24 16Z" fill="currentColor" opacity="0.7"/>
            <path d="M40 16C38 16 36 18 36 20C36 24 38 26 42 26C42 22 44 20 46 18C48 16 50 14 50 10C50 8 48 6 46 6C44 6 40 10 40 16Z" fill="currentColor" opacity="0.7"/>
          </svg>
        </template>
      </TitanIconSelect>
    `,
  }),
  args: {
    name: 'memorialization',
    options: [
      { value: 'buried', label: 'Buried' },
      { value: 'cremated', label: 'Cremated' },
      { value: 'other', label: 'Other' },
    ],
    showCheckmark: true,
  },
};

/**
 * Icon select with only two options.
 */
export const TwoOptions: Story = {
  render: (args) => ({
    components: { TitanIconSelect },
    setup() {
      const value = ref<string>('');
      return { args, value };
    },
    template: `
      <TitanIconSelect v-bind="args" v-model="value">
        <template #icon-buried>
          <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full h-full">
            <path d="M32 8C25.3726 8 20 13.3726 20 20V24H16V56H48V24H44V20C44 13.3726 38.6274 8 32 8Z" fill="currentColor"/>
            <rect x="20" y="28" width="24" height="4" fill="white" opacity="0.3"/>
          </svg>
        </template>
        <template #icon-cremated>
          <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full h-full">
            <path d="M32 12C28 12 24 14 24 18V20H22C20 20 18 22 18 24V50C18 52 20 54 22 54H42C44 54 46 52 46 50V24C46 22 44 20 42 20H40V18C40 14 36 12 32 12Z" fill="currentColor"/>
            <ellipse cx="32" cy="18" rx="6" ry="3" fill="currentColor" opacity="0.5"/>
          </svg>
        </template>
      </TitanIconSelect>
    `,
  }),
  args: {
    name: 'memorialization',
    options: [
      { value: 'buried', label: 'Buried' },
      { value: 'cremated', label: 'Cremated' },
    ],
  },
};

/**
 * Icon select with four options to test layout.
 */
export const FourOptions: Story = {
  render: (args) => ({
    components: { TitanIconSelect },
    setup() {
      const value = ref<string>('');
      return { args, value };
    },
    template: `
      <TitanIconSelect v-bind="args" v-model="value">
        <template #icon-buried>
          <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full h-full">
            <path d="M32 8C25.3726 8 20 13.3726 20 20V24H16V56H48V24H44V20C44 13.3726 38.6274 8 32 8Z" fill="currentColor"/>
            <rect x="20" y="28" width="24" height="4" fill="white" opacity="0.3"/>
          </svg>
        </template>
        <template #icon-cremated>
          <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full h-full">
            <path d="M32 12C28 12 24 14 24 18V20H22C20 20 18 22 18 24V50C18 52 20 54 22 54H42C44 54 46 52 46 50V24C46 22 44 20 42 20H40V18C40 14 36 12 32 12Z" fill="currentColor"/>
            <ellipse cx="32" cy="18" rx="6" ry="3" fill="currentColor" opacity="0.5"/>
          </svg>
        </template>
        <template #icon-memorial>
          <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full h-full">
            <circle cx="32" cy="20" r="8" fill="currentColor"/>
            <path d="M20 50C20 38 26 32 32 32C38 32 44 38 44 50V54H20V50Z" fill="currentColor"/>
          </svg>
        </template>
        <template #icon-other>
          <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full h-full">
            <path d="M32 10C28 10 26 14 26 18C26 22 28 24 32 24C32 20 34 18 36 16C38 14 40 12 40 8C40 6 38 4 36 4C34 4 32 6 32 10Z" fill="currentColor"/>
            <path d="M24 16C22 16 20 18 20 20C20 24 22 26 26 26C26 22 28 20 30 18C32 16 34 14 34 10C34 8 32 6 30 6C28 6 24 10 24 16Z" fill="currentColor" opacity="0.7"/>
            <path d="M40 16C38 16 36 18 36 20C36 24 38 26 42 26C42 22 44 20 46 18C48 16 50 14 50 10C50 8 48 6 46 6C44 6 40 10 40 16Z" fill="currentColor" opacity="0.7"/>
          </svg>
        </template>
      </TitanIconSelect>
    `,
  }),
  args: {
    name: 'memorialization',
    options: [
      { value: 'buried', label: 'Buried' },
      { value: 'cremated', label: 'Cremated' },
      { value: 'memorial', label: 'Memorial' },
      { value: 'other', label: 'Other' },
    ],
  },
};

/**
 * Disabled state - entire select is disabled.
 */
export const Disabled: Story = {
  render: (args) => ({
    components: { TitanIconSelect },
    setup() {
      const value = ref<string>('');
      return { args, value };
    },
    template: `
      <TitanIconSelect v-bind="args" v-model="value">
        <template #icon-buried>
          <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full h-full">
            <path d="M32 8C25.3726 8 20 13.3726 20 20V24H16V56H48V24H44V20C44 13.3726 38.6274 8 32 8Z" fill="currentColor"/>
            <rect x="20" y="28" width="24" height="4" fill="white" opacity="0.3"/>
          </svg>
        </template>
        <template #icon-cremated>
          <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full h-full">
            <path d="M32 12C28 12 24 14 24 18V20H22C20 20 18 22 18 24V50C18 52 20 54 22 54H42C44 54 46 52 46 50V24C46 22 44 20 42 20H40V18C40 14 36 12 32 12Z" fill="currentColor"/>
            <ellipse cx="32" cy="18" rx="6" ry="3" fill="currentColor" opacity="0.5"/>
          </svg>
        </template>
        <template #icon-other>
          <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full h-full">
            <path d="M32 10C28 10 26 14 26 18C26 22 28 24 32 24C32 20 34 18 36 16C38 14 40 12 40 8C40 6 38 4 36 4C34 4 32 6 32 10Z" fill="currentColor"/>
            <path d="M24 16C22 16 20 18 20 20C20 24 22 26 26 26C26 22 28 20 30 18C32 16 34 14 34 10C34 8 32 6 30 6C28 6 24 10 24 16Z" fill="currentColor" opacity="0.7"/>
            <path d="M40 16C38 16 36 18 36 20C36 24 38 26 42 26C42 22 44 20 46 18C48 16 50 14 50 10C50 8 48 6 46 6C44 6 40 10 40 16Z" fill="currentColor" opacity="0.7"/>
          </svg>
        </template>
      </TitanIconSelect>
    `,
  }),
  args: {
    name: 'memorialization',
    options: [
      { value: 'buried', label: 'Buried' },
      { value: 'cremated', label: 'Cremated' },
      { value: 'other', label: 'Other' },
    ],
    disabled: true,
  },
};

/**
 * Disabled state with a pre-selected value.
 */
export const DisabledWithValue: Story = {
  render: (args) => ({
    components: { TitanIconSelect },
    setup() {
      const value = ref<string>('cremated');
      return { args, value };
    },
    template: `
      <TitanIconSelect v-bind="args" v-model="value">
        <template #icon-buried>
          <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full h-full">
            <path d="M32 8C25.3726 8 20 13.3726 20 20V24H16V56H48V24H44V20C44 13.3726 38.6274 8 32 8Z" fill="currentColor"/>
            <rect x="20" y="28" width="24" height="4" fill="white" opacity="0.3"/>
          </svg>
        </template>
        <template #icon-cremated>
          <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full h-full">
            <path d="M32 12C28 12 24 14 24 18V20H22C20 20 18 22 18 24V50C18 52 20 54 22 54H42C44 54 46 52 46 50V24C46 22 44 20 42 20H40V18C40 14 36 12 32 12Z" fill="currentColor"/>
            <ellipse cx="32" cy="18" rx="6" ry="3" fill="currentColor" opacity="0.5"/>
          </svg>
        </template>
        <template #icon-other>
          <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full h-full">
            <path d="M32 10C28 10 26 14 26 18C26 22 28 24 32 24C32 20 34 18 36 16C38 14 40 12 40 8C40 6 38 4 36 4C34 4 32 6 32 10Z" fill="currentColor"/>
            <path d="M24 16C22 16 20 18 20 20C20 24 22 26 26 26C26 22 28 20 30 18C32 16 34 14 34 10C34 8 32 6 30 6C28 6 24 10 24 16Z" fill="currentColor" opacity="0.7"/>
            <path d="M40 16C38 16 36 18 36 20C36 24 38 26 42 26C42 22 44 20 46 18C48 16 50 14 50 10C50 8 48 6 46 6C44 6 40 10 40 16Z" fill="currentColor" opacity="0.7"/>
          </svg>
        </template>
      </TitanIconSelect>
    `,
  }),
  args: {
    name: 'memorialization',
    options: [
      { value: 'buried', label: 'Buried' },
      { value: 'cremated', label: 'Cremated' },
      { value: 'other', label: 'Other' },
    ],
    disabled: true,
  },
};

/**
 * Required field with validation.
 */
export const Required: Story = {
  render: (args) => ({
    components: { TitanIconSelect },
    setup() {
      const value = ref<string>('');
      return { args, value };
    },
    template: `
      <TitanIconSelect v-bind="args" v-model="value">
        <template #icon-buried>
          <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full h-full">
            <path d="M32 8C25.3726 8 20 13.3726 20 20V24H16V56H48V24H44V20C44 13.3726 38.6274 8 32 8Z" fill="currentColor"/>
            <rect x="20" y="28" width="24" height="4" fill="white" opacity="0.3"/>
          </svg>
        </template>
        <template #icon-cremated>
          <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full h-full">
            <path d="M32 12C28 12 24 14 24 18V20H22C20 20 18 22 18 24V50C18 52 20 54 22 54H42C44 54 46 52 46 50V24C46 22 44 20 42 20H40V18C40 14 36 12 32 12Z" fill="currentColor"/>
            <ellipse cx="32" cy="18" rx="6" ry="3" fill="currentColor" opacity="0.5"/>
          </svg>
        </template>
        <template #icon-other>
          <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full h-full">
            <path d="M32 10C28 10 26 14 26 18C26 22 28 24 32 24C32 20 34 18 36 16C38 14 40 12 40 8C40 6 38 4 36 4C34 4 32 6 32 10Z" fill="currentColor"/>
            <path d="M24 16C22 16 20 18 20 20C20 24 22 26 26 26C26 22 28 20 30 18C32 16 34 14 34 10C34 8 32 6 30 6C28 6 24 10 24 16Z" fill="currentColor" opacity="0.7"/>
            <path d="M40 16C38 16 36 18 36 20C36 24 38 26 42 26C42 22 44 20 46 18C48 16 50 14 50 10C50 8 48 6 46 6C44 6 40 10 40 16Z" fill="currentColor" opacity="0.7"/>
          </svg>
        </template>
      </TitanIconSelect>
    `,
  }),
  args: {
    name: 'memorialization',
    options: [
      { value: 'buried', label: 'Buried' },
      { value: 'cremated', label: 'Cremated' },
      { value: 'other', label: 'Other' },
    ],
    required: true,
  },
};

/**
 * Error state showing validation failure.
 */
export const WithError: Story = {
  render: (args) => ({
    components: { TitanIconSelect },
    setup() {
      const value = ref<string>('');
      return { args, value };
    },
    template: `
      <TitanIconSelect v-bind="args" v-model="value">
        <template #icon-buried>
          <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full h-full">
            <path d="M32 8C25.3726 8 20 13.3726 20 20V24H16V56H48V24H44V20C44 13.3726 38.6274 8 32 8Z" fill="currentColor"/>
            <rect x="20" y="28" width="24" height="4" fill="white" opacity="0.3"/>
          </svg>
        </template>
        <template #icon-cremated>
          <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full h-full">
            <path d="M32 12C28 12 24 14 24 18V20H22C20 20 18 22 18 24V50C18 52 20 54 22 54H42C44 54 46 52 46 50V24C46 22 44 20 42 20H40V18C40 14 36 12 32 12Z" fill="currentColor"/>
            <ellipse cx="32" cy="18" rx="6" ry="3" fill="currentColor" opacity="0.5"/>
          </svg>
        </template>
        <template #icon-other>
          <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full h-full">
            <path d="M32 10C28 10 26 14 26 18C26 22 28 24 32 24C32 20 34 18 36 16C38 14 40 12 40 8C40 6 38 4 36 4C34 4 32 6 32 10Z" fill="currentColor"/>
            <path d="M24 16C22 16 20 18 20 20C20 24 22 26 26 26C26 22 28 20 30 18C32 16 34 14 34 10C34 8 32 6 30 6C28 6 24 10 24 16Z" fill="currentColor" opacity="0.7"/>
            <path d="M40 16C38 16 36 18 36 20C36 24 38 26 42 26C42 22 44 20 46 18C48 16 50 14 50 10C50 8 48 6 46 6C44 6 40 10 40 16Z" fill="currentColor" opacity="0.7"/>
          </svg>
        </template>
      </TitanIconSelect>
    `,
  }),
  args: {
    name: 'memorialization',
    options: [
      { value: 'buried', label: 'Buried' },
      { value: 'cremated', label: 'Cremated' },
      { value: 'other', label: 'Other' },
    ],
    required: true,
    error: true,
  },
};

/**
 * Interactive playground with all controls.
 */
export const Playground: Story = {
  render: (args) => ({
    components: { TitanIconSelect },
    setup() {
      const value = ref<string>('');
      return { args, value };
    },
    template: `
      <TitanIconSelect v-bind="args" v-model="value">
        <template #icon-buried>
          <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full h-full">
            <path d="M32 8C25.3726 8 20 13.3726 20 20V24H16V56H48V24H44V20C44 13.3726 38.6274 8 32 8Z" fill="currentColor"/>
            <rect x="20" y="28" width="24" height="4" fill="white" opacity="0.3"/>
          </svg>
        </template>
        <template #icon-cremated>
          <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full h-full">
            <path d="M32 12C28 12 24 14 24 18V20H22C20 20 18 22 18 24V50C18 52 20 54 22 54H42C44 54 46 52 46 50V24C46 22 44 20 42 20H40V18C40 14 36 12 32 12Z" fill="currentColor"/>
            <ellipse cx="32" cy="18" rx="6" ry="3" fill="currentColor" opacity="0.5"/>
          </svg>
        </template>
        <template #icon-other>
          <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full h-full">
            <path d="M32 10C28 10 26 14 26 18C26 22 28 24 32 24C32 20 34 18 36 16C38 14 40 12 40 8C40 6 38 4 36 4C34 4 32 6 32 10Z" fill="currentColor"/>
            <path d="M24 16C22 16 20 18 20 20C20 24 22 26 26 26C26 22 28 20 30 18C32 16 34 14 34 10C34 8 32 6 30 6C28 6 24 10 24 16Z" fill="currentColor" opacity="0.7"/>
            <path d="M40 16C38 16 36 18 36 20C36 24 38 26 42 26C42 22 44 20 46 18C48 16 50 14 50 10C50 8 48 6 46 6C44 6 40 10 40 16Z" fill="currentColor" opacity="0.7"/>
          </svg>
        </template>
      </TitanIconSelect>
    `,
  }),
  args: {
    name: 'memorialization',
    options: [
      { value: 'buried', label: 'Buried' },
      { value: 'cremated', label: 'Cremated' },
      { value: 'other', label: 'Other' },
    ],
    disabled: false,
    required: false,
    error: false,
  },
};