<template>
  <div
    class="flex desktop:flex-row desktop:py-[16px] mobile:flex-col mobile:items-start mobile:py-[18px]"
    :class="valueColor ? 'desktop:py-[10px]' : ''"
  >
    <div class="flex flex-1 flex-row max-w-[255px] items-center">
      <Icons url="info" :size="14" />
      <p class="ml-[7px] text-gray-BBB text-[14px] font-normal">
        {{ title }}
      </p>
    </div>
    <div
      class="flex flex-1 flex-row justify-start items-center mobile:mt-[15px] tokens-select"
      v-if="title === 'Tokens'"
    >
      <el-select v-model="active" placeholder="Select">
        <el-option
          v-for="(item, index) in [1, 2, 3, 4]"
          :key="index"
          :label="item + 'token'"
          :value="item"
          class="text-white"
        />
      </el-select>
    </div>
    <div
      class="flex flex-1 flex-row justify-start items-center mobile:mt-[15px] text-white"
      v-else
    >
      <p
        :class="
          valueColor
            ? 'py-[6px] px-[12px] bg-black-006 rounded-[4px] text-blue-65B5FF'
            : ''
        "
        class="text-[15px] font-normal leading-[24px]"
      >
        {{ value }}
      </p>
    </div>
  </div>
  <div
    :class="isLast ? 'desktop:hidden' : ''"
    style="border-bottom: 1px solid #3b3b3c"
  />
</template>

<script setup lang="ts">
import { ElSelect, ElOption } from 'element-plus'
import Icons from '@src/components/icons/index.vue'
import { onMounted, ref } from 'vue'
const props = defineProps({
  title: String,
  value: [String, Array] as any,
  valueColor: String,
  isCopy: Boolean,
  isLast: Boolean,
})

onMounted(() => {
  console.log(props.title)
  if (props.title === 'Tokens') {
    list.value = props.value
  }
})

const list = ref<string | number[]>([])
const active = ref('1token')
</script>

<style lang="scss">
.tokens-select {
  .el-input__wrapper {
    background: #19191a;
    .el-input__inner {
      color: #fff;
    }
  }
  .el-select .el-input.is-focus .el-input__wrapper {
    box-shadow: 0 0 0 1px var(--el-select-border-color-hover) inset !important;
  }
  .el-select .el-input__wrapper.is-focus {
    box-shadow: 0 0 0 1px var(--el-select-border-color-hover) inset !important;
  }
}
</style>
