<script>
export default {
  name: "ToggleButton",
  props: {
    toggled: {
      type: Boolean,
      required: true,
      default() {
        return false;
      },
    },
  },
  methods: {
    handleClick() {
      event.preventDefault();
      this.$emit("click", event);
    },
    handlePlanClick() {
      event.preventDefault();
      this.$emit("plan-clicked", event);
    },
  },
};
</script>

<template>
  <a @click="handleClick" class="button" :class="{ 'is-toggled': toggled }">
    <svg
      width="18"
      height="18"
      viewBox="0 0 12 13"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <g clip-path="url(#clip0_855_6470)">
        <path
          d="M6.00512 1.50562C6.43112 1.50562 6.83912 1.67562 7.13862 1.97662L7.48762 2.32562C7.59992 2.43725 7.75178 2.49998 7.91012 2.50012H8.41012C8.83447 2.50012 9.24144 2.66869 9.54149 2.96874C9.84155 3.2688 10.0101 3.67577 10.0101 4.10012V4.60012C10.0101 4.75812 10.0731 4.91012 10.1836 5.02162L10.5326 5.37062C10.6821 5.51922 10.8007 5.69588 10.8816 5.89045C10.9626 6.08502 11.0043 6.29367 11.0044 6.50441C11.0045 6.71515 10.9629 6.92383 10.8822 7.11847C10.8014 7.31312 10.6829 7.48988 10.5336 7.63862L10.1846 7.98762C10.073 8.09991 10.0103 8.25177 10.0101 8.41012V8.91012C10.0101 9.33446 9.84155 9.74143 9.54149 10.0415C9.24144 10.3415 8.83447 10.5101 8.41012 10.5101H7.91012C7.75227 10.5103 7.60083 10.5726 7.48862 10.6836L7.13962 11.0326C6.99102 11.182 6.81436 11.3006 6.61979 11.3816C6.42522 11.4626 6.21657 11.5043 6.00583 11.5044C5.79509 11.5045 5.58641 11.4629 5.39177 11.3821C5.19712 11.3014 5.02036 11.1829 4.87162 11.0336L4.52262 10.6846C4.41033 10.573 4.25847 10.5103 4.10012 10.5101H3.60012C3.17578 10.5101 2.76881 10.3415 2.46875 10.0415C2.16869 9.74143 2.00012 9.33446 2.00012 8.91012V8.41012C1.99999 8.25226 1.93765 8.10082 1.82662 7.98862L1.47762 7.63962C1.3282 7.49101 1.2096 7.31435 1.12864 7.11978C1.04768 6.92521 1.00595 6.71656 1.00586 6.50582C1.00577 6.29508 1.04731 6.0864 1.12809 5.89176C1.20888 5.69711 1.32733 5.52035 1.47662 5.37162L1.82562 5.02262C1.93726 4.91032 1.99999 4.75846 2.00012 4.60012V4.10012L2.00262 4.00912C2.02586 3.60117 2.2043 3.21757 2.50134 2.93699C2.79838 2.6564 3.19152 2.50009 3.60012 2.50012H4.10012C4.25798 2.49998 4.40942 2.43764 4.52162 2.32662L4.87062 1.97762C5.01929 1.82806 5.19606 1.70937 5.39076 1.62836C5.58546 1.54736 5.79425 1.50565 6.00512 1.50562ZM7.25012 7.00012C7.05121 7.00012 6.86045 7.07913 6.71979 7.21979C6.57914 7.36044 6.50012 7.5512 6.50012 7.75012C6.50012 7.94903 6.57914 8.13979 6.71979 8.28045C6.86045 8.4211 7.05121 8.50012 7.25012 8.50012C7.44904 8.50012 7.6398 8.4211 7.78045 8.28045C7.92111 8.13979 8.00012 7.94903 8.00012 7.75012C8.00012 7.5512 7.92111 7.36044 7.78045 7.21979C7.6398 7.07913 7.44904 7.00012 7.25012 7.00012ZM7.85362 4.64662C7.75986 4.55288 7.63271 4.50022 7.50012 4.50022C7.36754 4.50022 7.24039 4.55288 7.14662 4.64662L4.14662 7.64662C4.05555 7.74092 4.00515 7.86722 4.00629 7.99832C4.00743 8.12941 4.06001 8.25482 4.15271 8.34752C4.24542 8.44023 4.37083 8.49281 4.50192 8.49395C4.63302 8.49509 4.75932 8.44469 4.85362 8.35362L7.85362 5.35362C7.94736 5.25985 8.00002 5.1327 8.00002 5.00012C8.00002 4.86753 7.94736 4.74038 7.85362 4.64662ZM4.75012 4.50012C4.55121 4.50012 4.36045 4.57913 4.21979 4.71979C4.07914 4.86044 4.00012 5.0512 4.00012 5.25012C4.00012 5.44903 4.07914 5.63979 4.21979 5.78045C4.36045 5.9211 4.55121 6.00012 4.75012 6.00012C4.94904 6.00012 5.1398 5.9211 5.28045 5.78045C5.42111 5.63979 5.50012 5.44903 5.50012 5.25012C5.50012 5.0512 5.42111 4.86044 5.28045 4.71979C5.1398 4.57913 4.94904 4.50012 4.75012 4.50012Z"
          fill="#1A1A1A"
        />
      </g>
      <defs>
        <clipPath id="clip0_855_6470">
          <rect
            width="12"
            height="12"
            fill="white"
            transform="translate(0 0.5)"
          />
        </clipPath>
      </defs>
    </svg>

    <slot></slot>
  </a>
</template>

<style scoped>
.button {
  display: flex;
  width: fit-content !important;
  align-items: center !important;
  gap: 3px !important;
  padding: 10px 12px !important;
  text-decoration: none !important;
  font-size: 12px !important;
  font-weight: 550 !important;
  color: #1A1A1A !important;
  border-left: 1px solid #e3e3e3;
  border-top: 1px solid #e3e3e3;
  border-right: 1px solid #e3e3e3;
  background-color: #ffffff !important;
  border-radius: 8px !important;
  transition: all 0.3s !important;
  box-shadow:
      #e3e3e3 0 1px 0 0 inset,
      #e3e3e3 1px 0 0 0 inset,
      #e3e3e3 -1px 0 0 0 inset,
      #b5b5b5 0 -1px 0 0 inset;
  cursor: pointer;
}

.button:hover,
.button.is-toggled {
  background-color: #cccccc !important;
  color: #1A1A1A !important;
  box-shadow:
      #1a1a1a33 0 2px 1px 0 inset,
      #1a1a1a1f 1px 0 1px 0 inset,
      #1a1a1a1f -1px 0 1px 0 inset;
}

</style>
