<script setup>
import { BaseIcon } from "@components/common/icons";
const props = defineProps({
  color: { type: String, default: 'text-neutrals-900' },
  active: { type: Boolean, default: false },
});
</script>

<template>
  <BaseIcon viewBox="0 0 25 25" :active="active" :className="props.color">
    <template #default="{ fill }">
      <path
        d="M12 10.4661C10.913 8.35207 7.954 4.41307 5.202 2.47107C2.566 0.610074 1.561 0.932074 0.902 1.23107C0.139 1.57407 0 2.74607 0 3.43407C0 4.12407 0.378 9.08407 0.624 9.91307C1.439 12.6491 4.337 13.5731 7.007 13.2771C7.143 13.2571 7.282 13.2381 7.422 13.2211C7.284 13.2431 7.146 13.2611 7.007 13.2771C3.095 13.8571 -0.38 15.2821 4.177 20.3551C9.19 25.5451 11.047 19.2421 12 16.0471C12.953 19.2421 14.05 25.3181 19.733 20.3551C24 16.0471 20.905 13.8571 16.993 13.2771C16.8542 13.2617 16.7159 13.2431 16.578 13.2211C16.718 13.2381 16.857 13.2571 16.993 13.2771C19.663 13.5741 22.561 12.6491 23.376 9.91307C23.622 9.08507 24 4.12307 24 3.43507C24 2.74507 23.861 1.57407 23.098 1.22907C22.439 0.931074 21.434 0.609074 18.798 2.46907C16.046 4.41407 13.087 8.35307 12 10.4661Z"
        :fill="fill"
      />
    </template>
  </BaseIcon>
</template>

<style scoped></style>
