<template>
  <div class="fund-link">
    <div class="fund-name">
      {{ fund.asset }}
    </div>
    <div>
      <ul class="fund-details">
        <li>
          <svg-icon type="mdi" height="18" width="18" :path="mdiCircleMultipleOutline"/>
          <span class="fund-label">{{ props.fund.minContribution.toLocaleString() }}</span>
        </li>
        <li>
          <svg-icon type="mdi" height="18" width="18" :path="mdiBullseyeArrow"/>
          <span class="fund-label">{{ props.fund.amountAvailable.toLocaleString() }}</span>
        </li>
        <li>
          <svg-icon type="mdi" height="18" width="18" :path="mdiNoteTextOutline"/>
          <span class="fund-label">{{ props.fund.memo }}</span>
        </li>
        <li>
          <svg-icon type="mdi" height="18" width="18" :path="mdiWalletOutline"/>
          <span class="fund-label">
            {{ truncateWallet(props.fund.fundWallet, 5, undefined) }}
          </span>
        </li>
      </ul>
    </div>
  </div>
</template>
<script setup lang="ts">
import { truncateWallet } from '@/lib/helpers';
import { FundInfo } from '@/api/types';
import { PropType } from 'vue';
import SvgIcon from '@jamescoyle/vue-icon';
import {
  mdiBullseyeArrow,
  mdiCircleMultipleOutline,
  mdiNoteTextOutline,
  mdiWalletOutline,
} from '@mdi/js';

// eslint-disable-next-line no-undef
const props = defineProps({ fund: Object as PropType<FundInfo> });

const generateHue = (seed: string) => seed.split('')
  .map((c) => c.charCodeAt(0))
  .reduce((v1, v2) => v1 + v2) % 256;

const generateBackgroundStyle = (hueSeed: string) => {
  const hue = generateHue(hueSeed);
  return `background-color: hsl(${hue}deg, 32%, 47%)`;
};
</script>
<style scoped lang="stylus">
@import "../assets/styles/general.styl"

.fund-link
  background-color bg-color
  border-radius 8px
  overflow hidden
  filter signet-shadow

.fund-name
  font-size 3em
  margin 0.4em
  color text-color
  font-family "Passion One Bold"
  font-weight 900

.fund-label
  color text-color
  vertical-align top
  margin-left 6px

.fund-details
  background-color secondary
  display flex
  flex-direction row
  justify-content space-between
  list-style none
  padding 4px 10px 2px 10px
  margin 0
  vertical-align middle

svg
  color text-color

@media screen and (max-width: 780px)
  .fund-label
    display inline-block
    font-size 12px
    vertical-align text-top

@media screen and (max-width: 300px)
  .fund-label
    font-size 10px
</style>
