<template>
  <svg v-if="liked" class="icon inline" width="1em" height="1em" viewBox="0 0 256 256" focusable="false">
    <path
      d="M220.346 136.508l-81.032 81.031a16.013 16.013 0 0 1-22.625 0L33.58 134.43a59.974 59.974 0 0 1 2.344-87.07c23.281-21.015 61.25-19.054 84.578 4.297l7.5 7.492l9.578-9.578a60.698 60.698 0 0 1 43.984-17.554a59.55 59.55 0 0 1 43.063 19.89c20.984 23.297 19.062 61.25-4.281 84.602z"
      class="fill-heart"
    />
  </svg>
  <svg v-else class="icon inline" width="1em" height="1em" viewBox="0 0 256 256" focusable="false">
    <path
      d="M128 220.218a13.957 13.957 0 0 1-9.9-4.093l-83.112-83.113a58 58 0 0 1 2.257-84.166A56.049 56.049 0 0 1 78.826 34.79a62.72 62.72 0 0 1 40.266 18.28L128 61.975l10.988-10.988a58.003 58.003 0 0 1 84.166 2.257a56.05 56.05 0 0 1 14.058 41.581a62.725 62.725 0 0 1-18.28 40.267L137.9 216.125a13.96 13.96 0 0 1-9.899 4.093zm5.657-8.336zM74.985 46.734a44.094 44.094 0 0 0-29.71 11.03a46.003 46.003 0 0 0-1.802 66.763l83.112 83.113a2.005 2.005 0 0 0 2.83 0l81.032-81.033c18.168-18.168 19.868-47.476 3.79-65.332a46.003 46.003 0 0 0-66.764-1.802l-15.23 15.23a5.999 5.999 0 0 1-8.485 0l-13.15-13.15a50.6 50.6 0 0 0-35.623-14.82z"
      fill="currentColor"
    />
  </svg>
</template>

<script lang="ts">
export default {
  name: "HeartIcon",
  props: {
    liked: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style lang="scss">
.icon {
  transform: translate(0);
}
</style>
