<template>
    <button class="button-component w-[80px] h-[32px] rounded-full
        flex text-[#666666] border-[1px] border-[#666666]
        justify-center items-center bg-[#FFFFFF]
        hover:text-[#0099FF] hover:border-[#0099FF]
        focus:text-[#0099FF] focus:border-[#0099FF]
        cursor-pointer"
        :class="{
            'ring': isPressed,
            'ring-[#0099FF]' : isPressed,
            'ring-opacity-30': isPressed,
        }"
        @mousedown="onMousedown" @mouseup="onMouseup">
        {{ buttonText }}
    </button>
</template>

<script setup>
// The Lucia project.
// Copyright 2024-2026 DSP, inc.  All rights reserved.
// Authors:
//   cindy.chang@dsp.im (Cindy Chang), 2024/5/30
//   imacat.yang@dsp.im (imacat), 2023/9/23
/**
 * @module components/Button Outlined button component with
 *   press-state ring effect.
 */

import { ref } from 'vue';

defineProps({
    buttonText: {
        type: String,
        required: false,
    },
});

const isPressed = ref(false);

const onMousedown = () => {
    isPressed.value = true;
};

const onMouseup = () => {
    isPressed.value = false;
};
</script>
