<script lang="ts" setup>
  import icon from '../assets/command.svg';

  const props = defineProps<{
    value?: boolean;
  }>();

  const emit = defineEmits(['update:value', 'change']);

  const handleChange = (event: Event) => {
    const _value = (event.target as HTMLInputElement).checked;
    emit('update:value', _value);
    emit('change', _value);
  };
</script>

<template>
  <div class="command-send-button">
    123
    <a href="javascript:;">
      <img :src="icon" alt="" />
    </a>
  </div>
</template>

<style scoped lang="less">
  .command-send-button {
    width: 80px;
    height: 60px;
    position: relative;

    a {
      position: absolute;
      box-sizing: border-box;
      cursor: pointer;
      text-decoration: none;
      color: #fff;
      background: #f2385a;
      top: 0;
      padding: 0 16px;
      height: 60px;
      width: 80px;
      overflow: hidden;
      font-size: 20px;
      line-height: 60px;
      border-radius: 10px;
      box-shadow: 0 15px 0 0 #f02046, 0 0 20px 0 #bbb;
      transition: all 0.2s;
    }
  }
</style>