<template>
  <USelectMenu
    v-model="selectedCurrency"
    :items="selectOptions"
    value-key="value"
    :ui="{
      trigger: 'flex items-center gap-1.5 text-sm px-2.5 py-1.5 bg-white dark:bg-neutral-950 border border-neutral-200 dark:border-neutral-800 rounded-md hover:bg-neutral-50 dark:hover:bg-neutral-900 transition-colors',
      width: 'w-auto min-w-[120px]'
    }"
    size="xs"
    variant="ghost"
    color="neutral"
  >
    <template #label>
      <span class="text-xs font-mono">{{ getCurrencySymbol(selectedCurrency) }} {{ selectedCurrency }}</span>
    </template>
  </USelectMenu>
</template>

<script setup lang="ts">
import { currencyOptions, getCurrencySymbol } from '~/utils/currency'

const { currency } = useCoopBuilder()

// Create options for USelectMenu
const selectOptions = computed(() =>
  currencyOptions.map((curr) => ({
    label: `${curr.symbol} ${curr.code}`,
    value: curr.code,
  }))
)

// Two-way binding with the store
const selectedCurrency = computed({
  get: () => currency.value,
  set: (value: string) => {
    currency.value = value
  }
})
</script>