<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 21 20" :active="active" :className="props.color">
    <template #default="{ fill }">
      <path
        d="M8.75 17.5C8.75 17.5 7.5 17.5 7.5 16.25C7.5 15 8.75 11.25 13.75 11.25C18.75 11.25 20 15 20 16.25C20 17.5 18.75 17.5 18.75 17.5H8.75ZM13.75 10C14.7446 10 15.6984 9.60491 16.4017 8.90165C17.1049 8.19839 17.5 7.24456 17.5 6.25C17.5 5.25544 17.1049 4.30161 16.4017 3.59835C15.6984 2.89509 14.7446 2.5 13.75 2.5C12.7554 2.5 11.8016 2.89509 11.0983 3.59835C10.3951 4.30161 10 5.25544 10 6.25C10 7.24456 10.3951 8.19839 11.0983 8.90165C11.8016 9.60491 12.7554 10 13.75 10ZM6.52 17.5C6.33478 17.1097 6.24237 16.6819 6.25 16.25C6.25 14.5562 7.1 12.8125 8.67 11.6C7.88648 11.358 7.06997 11.24 6.25 11.25C1.25 11.25 0 15 0 16.25C0 17.5 1.25 17.5 1.25 17.5H6.52ZM5.625 10C6.4538 10 7.24866 9.67076 7.83471 9.08471C8.42076 8.49866 8.75 7.7038 8.75 6.875C8.75 6.0462 8.42076 5.25134 7.83471 4.66529C7.24866 4.07924 6.4538 3.75 5.625 3.75C4.7962 3.75 4.00134 4.07924 3.41529 4.66529C2.82924 5.25134 2.5 6.0462 2.5 6.875C2.5 7.7038 2.82924 8.49866 3.41529 9.08471C4.00134 9.67076 4.7962 10 5.625 10Z"
        :fill="fill"
      />
    </template>
  </BaseIcon>
</template>

<style scoped></style>
