<script setup lang="ts">
import type { TransactionVendor } from '@/api/transaction'
import AppButton from './common/AppButton.vue'
import { useRoute } from 'vue-router'
import { getSelectedProfile } from '@/api/profile'
import { computed } from 'vue'

const props = defineProps<{ vendor: TransactionVendor }>()
defineEmits<{ edit: []; delete: [] }>()

const route = useRoute()

const routeToVendor = computed(() => {
  const profile = getSelectedProfile(route)
  return `/profiles/${profile}/vendors/${props.vendor.id}`
})
</script>
<template>
  <div class="vendor-card">
    <div style="flex-shrink: 1">
      <div>
        <RouterLink :to="routeToVendor">{{ vendor.name }}</RouterLink>
      </div>
      <div
        v-if="vendor.description !== null"
        class="font-size-small text-muted"
      >
        {{ vendor.description }}
      </div>
    </div>
    <div>
      <AppButton
        icon="wrench"
        size="sm"
        @click="$emit('edit')"
      ></AppButton>
      <AppButton
        icon="trash"
        size="sm"
        @click="$emit('delete')"
      ></AppButton>
    </div>
  </div>
</template>
<style lang="css">
.vendor-card {
  display: flex;
  justify-content: space-between;
  background-color: var(--bg);
  border-radius: 0.5rem;
  margin: 0.5rem 0;
  padding: 0.5rem;
}
</style>
