<template>
  <!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag -->
  <div class="form-check ui-checkbox" :class="[hasError ? 'has-error' : '']">
    <input class="form-check-input"
    type="checkbox"
    aria-checked="false"
    :name="checkboxName"
    :id="buttonID"
    :tabindex="tabIndex"
    :aria-required="isRequired"
    />
    <label class="d-flex align-items-start" :for="buttonID">
      <p v-if="checkboxLabel" class="m-0">{{ checkboxLabel }}</p>
      <span v-if="screenReaderOnlyText" class="sr-only">{{
        screenReaderOnlyText
      }}</span>
    </label>
  </div>
</template>

<script>
export default {
  name: "checkbox",
  props: {
    checkboxName: String,
    buttonID: String,
    tabIndex: Number,
    checkboxLabel: String,
    screenReaderOnlyText: String,
    isRequired: Boolean,
    hasError: Boolean
  },
};
</script>

<style lang="scss" scoped>
.form-check {
  .form-check-input {
    border: 1px solid $gray-500;
    border-radius: 2px;
    &:checked {
      background-size: 125%;
      border: 1px solid $blue;
      + label {
        p {
          font-weight: 500;
          font-size: .875rem;
          color: $black;
        }
      }
    }
    &:focus {
      box-shadow: 0 0 0 4px $blue-300;
    }
  }
  &:hover {
    .form-check-input {
      box-shadow: 0 0 0 4px $blue-300;
    }
  }
  p {
    font-weight: 400;
    font-size: .875rem;
    color: $gray-600;
  }
}
</style>
