<template>
  <div class="camera-button">
    <input
      :id="props.inputId"
      type="file"
      ref="file"
      accept="image/*"
      capture="camera"
      @change="emitChange"
    />

    <label :for="props.inputId">
      <SpaceButton :class="{ hollow: props.retry }" :loading="props.loading">
        <slot />
      </SpaceButton>
    </label>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  props: {
    inputId: {
      default: "cameraButton",
      type: String,
    },
    retry: {
      default: false,
      type: Boolean,
    },
    loading: {
      default: false,
      type: Boolean,
    },
  },
  setup(props, { emit }) {
    const emitChange = (event: any): void => {
      emit("change", event.target.files);
    };

    return {
      emitChange,
      props,
    };
  },
});
</script>

<style lang="scss">
.camera-button {
  .retry {
    padding: 20px 0;
    text-align: center;
    color: var(--blue);
    cursor: pointer;
  }
}
</style>
