<!-- The filled version of the button has a solid background -->
<template>
  <button
    class="button-filled-component w-[80px] h-[32px] rounded-full flex text-[#FFFFFF] justify-center items-center bg-[#0099FF] hover:text-[#FFFFFF] hover:bg-[#0080D5] cursor-pointer"
    :class="{
      ring: isPressed,
      'ring-[#0099FF]': isPressed,
      'ring-opacity-30': isPressed,
      'bg-[#0099FF]': 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/ButtonFilled Filled button component with
 *   solid background and 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>
