<template>
    <span>
        <input
            :id="option.id"
            :checked="checked"
            :disabled="disabledOptions(option)"
            :value="option.id"
            class="hidden peer"
            hidden
            name="option"
            type="checkbox"
            @change="$emit('sync')"
        />
        <label
            :class="
                disabledOptions(option)
                    ? 'text-gray-200 cursor-not-allowed'
                    : '!cursor-pointer'
            "
            :for="option.id"
            class="px-2.5 flex-nowrap text-center gap-1.5 py-0.5 rounded-full transition-all duration-200 flex items-center justify-center text-sm select-none border border-blue-100 peer-checked:border-blue-300 peer-checked:bg-blue-300 peer-checked:text-white"
        >
            <span>
                {{ option[nameBy] }}
            </span>
            <svg
                v-if="checked"
                fill="none"
                height="2"
                viewBox="0 0 10 2"
                width="10"
                xmlns="http://www.w3.org/2000/svg"
            >
                <path
                    d="M9 1H5H1"
                    stroke="currentColor"
                    stroke-linecap="round"
                    stroke-width="1.5"
                />
            </svg>
            <svg
                v-else
                fill="none"
                height="10"
                viewBox="0 0 10 10"
                width="10"
                xmlns="http://www.w3.org/2000/svg"
            >
                <path
                    d="M5 9V5M5 5V1M5 5H9M5 5H1"
                    stroke="currentColor"
                    stroke-linecap="round"
                    stroke-width="1.5"
                />
            </svg>
        </label>
    </span>
</template>

<script>
export default {
    props: {
        disabledOptions: { type: Function, default: () => false },
        option: Object,
        name: { type: String, default: "options" },
        checked: { type: Boolean, default: false },
        nameBy: { type: String, default: "name" },
    },
};
</script>
