<script setup>
import { BaseIcon } from "@/components/common/icons";

const props = defineProps({
  color: { type: String, default: 'text-neutrals-900' },
  active: { type: Boolean, default: false },
  width: { type: String, default: "20" },
  height: { type: String, default: "20" }
});
</script>

<template>
  <!-- Fixed conflict here remove after testing -->
  <BaseIcon viewBox="0 0 21 20" :active="active" :height="props.height" :width="props.width" :className="props.color">
    <template #default="{ fill }">
      <path
        d="M1.875 3.75C1.37772 3.75 0.900805 3.94754 0.549175 4.29917C0.197544 4.65081 0 5.12772 0 5.625V7.5C0 7.66576 0.065848 7.82473 0.183058 7.94194C0.300269 8.05915 0.45924 8.125 0.625 8.125C1.12228 8.125 1.59919 8.32254 1.95083 8.67417C2.30246 9.0258 2.5 9.50272 2.5 10C2.5 10.4973 2.30246 10.9742 1.95083 11.3258C1.59919 11.6775 1.12228 11.875 0.625 11.875C0.45924 11.875 0.300269 11.9408 0.183058 12.0581C0.065848 12.1753 0 12.3342 0 12.5V14.375C0 14.8723 0.197544 15.3492 0.549175 15.7008C0.900805 16.0525 1.37772 16.25 1.875 16.25H18.125C18.6223 16.25 19.0992 16.0525 19.4508 15.7008C19.8025 15.3492 20 14.8723 20 14.375V12.5C20 12.3342 19.9342 12.1753 19.8169 12.0581C19.6997 11.9408 19.5408 11.875 19.375 11.875C18.8777 11.875 18.4008 11.6775 18.0492 11.3258C17.6975 10.9742 17.5 10.4973 17.5 10C17.5 9.50272 17.6975 9.0258 18.0492 8.67417C18.4008 8.32254 18.8777 8.125 19.375 8.125C19.5408 8.125 19.6997 8.05915 19.8169 7.94194C19.9342 7.82473 20 7.66576 20 7.5V5.625C20 5.12772 19.8025 4.65081 19.4508 4.29917C19.0992 3.94754 18.6223 3.75 18.125 3.75H1.875Z"
        :fill="fill"
      />
    </template>
  </BaseIcon>
</template>

<style scoped></style>
