<script setup lang="ts">
// Minimal Lucide-style line icons. Add more as needed from project/platform-tokens.jsx.

const props = withDefaults(
  defineProps<{
    name: 'mail' | 'shield' | 'key' | 'check' | 'external' | 'arrowRight'
    size?: number
    stroke?: string
    strokeWidth?: number
  }>(),
  {
    size: 16,
    stroke: 'currentColor',
    strokeWidth: 1.6,
  },
)
</script>

<template>
  <svg
    :width="size"
    :height="size"
    viewBox="0 0 24 24"
    fill="none"
    :stroke="stroke"
    :stroke-width="strokeWidth"
    stroke-linecap="round"
    stroke-linejoin="round"
    aria-hidden="true"
    style="flex-shrink: 0"
  >
    <template v-if="name === 'mail'">
      <rect x="2.5" y="5" width="19" height="14" rx="2" />
      <path d="M3 7l9 6 9-6" />
    </template>
    <template v-else-if="name === 'shield'">
      <path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z" />
    </template>
    <template v-else-if="name === 'key'">
      <circle cx="9" cy="14" r="4" />
      <path d="M12.5 11L20 3.5l-2-2-2 2 2 2-2 2 2 2" />
    </template>
    <template v-else-if="name === 'check'">
      <path d="M5 12l5 5L20 7" />
    </template>
    <template v-else-if="name === 'external'">
      <path d="M14 4h6v6" />
      <path d="M20 4l-9 9" />
      <path d="M19 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h5" />
    </template>
    <template v-else-if="name === 'arrowRight'">
      <path d="M5 12h14" />
      <path d="M13 5l7 7-7 7" />
    </template>
  </svg>
</template>
