<template>
  <router-link :to="{name: 'Inspect', params: {'address': result.target}}" class="search-result">
    <div class="search-result-container">
      <div class="search-result-key">{{ result.key }}</div>
      <div class="search-result-value">{{ result.value.c }}</div>
    </div>
  </router-link>
</template>

<script lang="ts">
import {defineComponent, PropType} from "vue";
import {IEntry} from "@/types/base";


export default defineComponent({
  name: "SearchResult",
  props: {
    result: {
      type: Object as PropType<IEntry>,
      required: true
    }
  }
});
</script>

<style scoped lang="scss">
.search-result {
  .search-result-container {
    box-shadow: var(--sl-shadow-medium);
    margin: .5rem;
    padding: 1rem;
  }

  text-align: center;

  color: #2c3e50;
  text-decoration: inherit;

  div {
    margin: .5rem 0;
  }

  .search-result-key {
    font-weight: bold;
  }
}
</style>
