<script lang="ts">
  export let name = '';
  export let className = '';
  export let placeholder = '';
  export let checked = false;
  export let onChange: (e: Event & { currentTarget: EventTarget & HTMLInputElement }) => void;
  export let error: string | undefined = undefined;
</script>

<div class="checkbox {checked ? 'checked' : ''} {error ? 'error' : ''} {className}">
  <label class="checkboxContainer" for={name}>
    <input type="checkbox" id={name} {name} bind:checked class="checkboxInput" on:input={onChange} />
    <span class="checkboxBox" />
    <span class="checkboxPlaceholder">{@html placeholder}</span>
    {#if error !== undefined}
      <p class="checkboxError">{error}</p>
    {/if}
  </label>
</div>

<style lang="scss">
  @import '../../../scss/media';
  @import '../../../scss/mixins';
  @import '../../../scss/variables';

  .checkbox {
    .checkboxContainer {
      display: flex;
      align-items: flex-start;
      position: relative;
      gap: 16px;
      cursor: pointer;
      padding-top: 16px;
      min-height: 64px;
    }

    .checkboxInput {
      outline: none;
      appearance: none;
      visibility: hidden;
      display: none;
    }

    .checkboxBox {
      display: flex;
      width: 18px;
      min-width: 18px;
      height: 18px;
      border-radius: 4px;
      border: 1px solid $techBlueSecondary;
      background-color: $techBlue2;
      margin-top: 4px;
    }

    .checkboxPlaceholder {
      @include smallDefault;

      display: block;
      user-select: none;

      & :global(a) {
        color: $linkPrimary;
      }
    }

    .checkboxError {
      position: absolute;
      top: -6px;
      left: 0;
      z-index: 1;
      border-radius: 4px;
      background: $redPrimary;
      padding: 2px 8px;
      color: $techWhite;
      font-size: 10px;
      font-weight: 400;
      line-height: 14px;
    }

    &.error {
      .checkboxBox {
        border: 1px solid $redPrimary;
        background: $techBlue2;
      }
    }

    &.checked {
      .checkboxBox {
        background-color: $redPrimary;
        background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3.3418' y='5.07715' width='7.18022' height='1.30486' rx='0.652431' transform='rotate(-45 3.3418 5.07715)' fill='white'/%3E%3Crect x='4.25708' y='5.99878' width='5.0894' height='1.29181' rx='0.645904' transform='rotate(-135 4.25708 5.99878)' fill='white'/%3E%3C/svg%3E%0A");
        background-repeat: no-repeat;
        background-size: 10px 6px;
        background-position: center;
        border: 1px solid $redPrimary;
      }
    }
  }
  .checkboxOnce {

    .checkboxContainer  {
      align-items: center;
      padding-top: 4px;

      @include breakpoint-down('tabM') {
        padding-top: 0px;
        min-height: 60px;
        align-items: end;
      }
    }
    .checkboxPlaceholder {
      font-size: 14px;
      line-height: 19.6px;
      @include breakpoint-down('tabL') {
        font-size: 10px;
        line-height: 12px;
      }

      @include breakpoint-down('tabM') {
        font-size: 12px;
        line-height: 14.4px;
      }
      a {
        color: #4EB2FF;
      }
    }
  }
</style>