<script setup lang="ts">
import type { LedgerIconKey } from "@cents/domain";
import { ledgerIconPresets } from "../data/ledger-icons";

defineProps<{ modelValue: LedgerIconKey }>();
const emit = defineEmits<{ "update:modelValue": [value: LedgerIconKey] }>();
const iconOptions = ledgerIconPresets.flatMap((preset) => preset.options);
</script>

<template>
  <div class="ledger-icon-picker">
    <button
      v-for="option in iconOptions"
      :key="option.key"
      type="button"
      :class="{ active: modelValue === option.key }"
      :aria-label="option.label"
      :title="option.label"
      @click="emit('update:modelValue', option.key)"
    >
      <component :is="option.icon" :size="22" />
    </button>
  </div>
</template>

<style scoped>
.ledger-icon-picker { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:7px; width:100%; }
.ledger-icon-picker button { width:100%; aspect-ratio:1; min-width:0; display:grid; place-items:center; border:1px solid #dce7e4; border-radius:9px; background:#f8fbfa; color:#58716a; }
.ledger-icon-picker button :deep(svg) { width:clamp(18px,5vw,25px); height:clamp(18px,5vw,25px); }
.ledger-icon-picker button.active { border-color:#087f72; background:#eaf7f3; color:#087f72; box-shadow:inset 0 0 0 1px #087f72; }
</style>
