<template>
  <div :class="['chain-block','chain-'+chainId]"><v-avatar class='chain-avatar' v-if="media.img" :image="media.img" rounded="0" size="1em"/>&nbsp;{{media.name}}</div>
</template>

<script setup>
import {useStore} from "@/store/store";
import {computed} from "vue";

const unsupportedMedia = {}
const chainMedia = {
  1: {name: 'Ethereum', img: null},
  42161: { name: 'Arbitrum One', img: '/arbitrum-logo.svg'},
  31331: { name: 'Mockchain', img: null},
}

const s = useStore()
const props = defineProps(['chainId'])
const media = computed(()=>chainMedia[props.chainId] || unsupportedMedia)

</script>

<style lang="scss"> // NOT 'scoped'
@use "src/styles/vars" as *;
//.chain-avatar {
//  max-height: 1em;
//  max-width: 1em;
//}
.chain-block {
  display: inline;
}
.chain-42161 {
  color: #12aaff;
}
</style>
