<template>
  <div
    class="flex flex-1 flex-row justify-between items-center py-[16px] pl-[18px] border-b border-b-black-3B3B3C"
  >
    <div>
      <p class="text-white text-[16px] font-medium">{{ title }}</p>
      <p
        class="text-gray-BBB text-[14px] font-normal mt-[12px] cursor-pointer"
        @click="handleRouter(`/tx/${value1}`)"
      >
        {{ value1 }}
      </p>
      <div
        class="text-gray-BBB text-[14px] font-normal flex flex-row items-center mt-[12px]"
      >
        <p
          class="mr-[10px] cursor-pointer"
          @click="handleRouter(`/tokens/${value2}`)"
        >
          {{ value2 }}
        </p>
        <Icons url="chevron_right" :size="16" />
        <p
          class="ml-[10px] cursor-pointer"
          @click="handleRouter(`/tokens/${value3}`)"
        >
          {{ value3 }}
        </p>
      </div>
    </div>
    <div
      class="flex flex-row items-center w-[87px] rounded-[4px] px-[12px] py-[4px] bg-green-2EAA7D"
      :class="state === 'Success' ? 'bg-green-2EAA7D' : 'bg-red-C4403E'"
    >
      <Icons
        :url="state === 'Success' ? 'check_circle' : 'cancel'"
        :size="12"
      />
      <p class="text-[12px] font-normal align-middle text-white ml-[2px]">
        {{ state }}
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
import Icons from '@src/components/icons/index.vue'
import { useRouter } from 'vue-router'
defineProps({
  title: [String, Number],
  value1: String,
  value2: String,
  value3: String,
  state: String,
  route: Function,
})
const router = useRouter()
const handleRouter = (route: string) => {
  router.replace(route)
}
</script>

<style scoped></style>
