<template>
  <article class="grid-item">
    <router-link :to="`/fruit/${item.id}`">
      <div class="thumbnail">
        <img :src="item.image" :alt="item.name" />
      </div>
      <section>
        <h3>
          {{ item.name }}
          <span class="tag" :style="{ backgroundColor: item.color }">{{ item.taste }}</span>
        </h3>

        <hr />

        <p class="price">{{ "$" + item.price }}</p>
      </section>
    </router-link>
  </article>
</template>

<script>
export default {
  props: {
    item: Object
  }
};
</script>

<style scoped lang="less">
.grid-item {
  background-color: @secondary-color;
  border-radius: 10px;
  overflow: hidden;

  &:hover .thumbnail img {
    transform: scale(1.1);
  }

  a {
    display: block;
    text-decoration: none;
    color: inherit;

    .thumbnail {
      height: 285px;
      overflow: hidden;
      box-shadow: 0 1px 4px 1px #d2d2f2;

      img {
        border-radius: 10px 10px 0 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        max-width: 100%;
        transition: transform 0.4s ease-in-out;
      }
    }

    section {
      padding: 1.5rem 1rem;

      h3 {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 0.55rem;
      }

      hr {
        width: 100px;
        color: #cece;
        margin: 1.35rem auto;
      }

      .tag {
        border-radius: 25px;
        padding: 0.55rem 0.75rem 0.35rem 0.75rem;
        margin-left: 0.75rem;
        color: #ffffff;
        font-size: 14px;
        font-weight: bold;
        text-align: center;
        text-transform: lowercase;
      }

      .price {
        text-align: center;
        margin: 0;
        font-size: 28px;
        font-weight: bold;
      }
    }
  }
}
</style>
