<template>
  <router-link
    :to="{ name: 'browse', params: { addresses: [result.entity] } }"
    class="search-result"
  >
    <div class="search-result-container">
      <div class="search-result-attribute">{{ result.attribute }}</div>
      <div class="search-result-value">
        <Marquee>{{ result.value.c }}</Marquee>
      </div>
    </div>
  </router-link>
</template>

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

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

<style scoped lang="scss">
.search-result {
  display: flex;
  flex-direction: column;
  justify-content: center;

  width: 100%;
  height: 100%;

  border: 1px solid var(--foreground);
  border-radius: 1rem;

  .search-result-container {
    padding: 1em;
  }

  text-align: center;

  color: --foreground;
  text-decoration: inherit;

  div {
    margin: 0.5rem 0;
  }

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