<template>
  <div
    class="flex flex-1 flex-col justify-between items-center py-[20px] border-b border-b-black-3B3B3C"
  >
    <div class="flex flex-1 w-full">
      <div class="flex flex-1 flex-row w-full items-center justify-between">
        <p class="text-white text-[16px] font-medium">{{ title }}</p>
        <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>
    </div>
    <p class="text-gray-BBB text-[14px] font-normal mt-[12px] break-all">
      {{ value1 }}
    </p>
    <div
      class="text-gray-BBB text-[14px] font-normal flex flex-1 w-full flex-col mt-[12px]"
    >
      <p class="break-all">{{ value2 }}</p>
      <Icons url="chevron_right" :size="16" />
      <p class="break-all">{{ value3 }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import Icons from '@src/components/icons/index.vue'
defineProps({
  title: String,
  value1: String,
  value2: String,
  value3: String,
  state: String,
})
</script>

<style scoped></style>
