<template>
  <Sidebar id="asset" class="asset-sidebar" @close="$emit('close')">
    <UiCoin :code="asset.code" class="asset-sidebar__coin" />

    <div>
      <MoneyAmount class="asset-sidebar__balance" :value="asset.balance" :currency="asset.code" />
    </div>

    <div class="asset-sidebar__actions">
      <UiButton type="ghost" size="small" icon="s-up-right" :href="`/create/withdraw/${projectId}/${asset.code}`">
        Отправить
      </UiButton>

      <UiButton type="ghost" size="small" icon="s-down-left" :href="`/create/invoice/${projectId}`">
        Получить
      </UiButton>

      <UiButton type="ghost" color="secondary" size="small" icon="s-exchange" disabled>
        Обменять
      </UiButton>
    </div>
  </Sidebar>
</template>

<script setup lang="ts">
import { Sidebar } from '#components'

defineProps({
  projectId: {
    type: String,
    required: true,
  },
  asset: {
    type: Object,
    required: true,
  },
})

defineEmits(['close'])
</script>

<style lang="scss">
.asset-sidebar {
  text-align: center;

  &__coin {
    border-radius: 9px;
    height: 48px;
    width: 48px;
    margin-bottom: 16px;
  }

  &__balance {
    @include h3('money-amount-value', true);
  }

  &__actions {
    --button-ghost-primary-color: #{$clr-black};
    --button-icon-color: #{$clr-cyan-500};
    --button-icon-disabled-color: #{$clr-grey-400};

    display: flex;
    padding: 4px;
    background-color: $clr-grey-100;
    border-radius: 12px;
    margin-top: 40px;

    > * {
      flex: 1;
    }
  }
}
</style>
