<template>
    <div class="hy-progress-bar">
        <div id="visual"></div>
    </div>
</template>

<script>
export default {
    name: "ProgressBar",
    props: {
        progress: {
            type: Number,
            required: true,
        },
        width: {
            type: String,
            default: null,
        },
    },
    computed: {
        progress_() {
            if (this.progress >= 1) return `100%`;
            if (this.progress <= 0) return `0%`;
            return `${this.progress * 100}%`;
        },
        width_() {
            if (this.width) return this.width;
            else return "100%";
        },
    },
};
</script>

<style lang="scss" scoped>
.hy-progress-bar {
    height: 10px;
    border-radius: 9999px;
    background: var(--hy-color-gray-3);
    width: v-bind("width_");

    & > #visual {
        height: 100%;
        width: v-bind("progress_");
        background-color: var(--hy-accent-color);
        border-radius: 9999px;
        transition: var(--hy-element-transition);
        transition-property: width;
        min-width: 10px;
    }
}
</style>
