<template>
  <div class="card">
    <div class="card-header">
      <h1 class="card-header-title">{{ kitty.name }}</h1>
      <pet-rarity :rarity="kitty.rarity" />
    </div>
    <div class="card-body">
      <img class="card-body-preview" :src="kitty.image">
      <div class="card-body-exp">
        <pet-level :kitty="kitty" />
      </div>
      <div class="card-body-feature">
        {{ kitty.description }}
      </div>
    </div>
  </div>
</template>

<script>
  import PetLevel from "./PetLevel";
  import PetRarity from "./PetRarity";

  import {VPopover} from 'v-tooltip';

  export default {
    props: ["kitty"],

    components: {
      PetLevel,
      PetRarity,
      VPopover
    },
  }
</script>

<style scoped>
  .card {
    position: relative;
    display: flex;
    flex-flow: column;
    align-items: center;
    margin: 0 10px;
    padding: 40px 10px 10px;
    min-height: 460px;
    width: 202px;
    border-radius: 8px;
    background: #263448;
  }

  .card-header {
    margin-bottom: 20px;
  }

  .card-header-title {
    height: 30px;
    font-size: 16px;
    text-align: center;
    font-family: Helvetica;
    margin: 0 0 16px;
  }

  .card-body-preview {
    display: block;
    width: 100%;
    margin: 20px auto;
  }

  .card-body-price {
    max-width: 110px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    font-size: 14px;
    font-family: Helvetica;
  }

  .card-body-price-sign {
    position: relative;
    left: 0;
  }

  .card-body-price span {
    display: inline-block;
    min-width: 80px;
    text-align: left;
  }

  .card-body-feature {
    font-family: Helvetica;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    margin-top: 10px;
  }

  .card-body-level {
    font-family: Helvetica;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
  }

  .card-body-stars {
    margin-top: 5px;
    text-align: center;
  }
</style>