<template>
  <button  :class="['btn', btnClass]" @click="handleClick">
    {{ text }}
  </button>
</template>
<script setup>
  const props = defineProps({
    btnClass: {
      type: String,
      required: true,
    },
    onClick: {
      type: Function,
      required: true,
    },
    text: {
      type: String,
      required: true,
    },
  })
  const handleClick = () => {
    props.onClick();
  };
</script>
<style scoped lang="scss">
  .btn {
    padding: 10px 24px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    transition: background-color 0.2s;
    white-space: nowrap;
    cursor: pointer;
    color: white;
  }

  .btn-orange {
    background-color: #fb923c;
  }

  .btn-yellow {
    background-color: #facc15;
  }

  .btn-orange:hover {
    background-color: #f97316;
  }

  .btn-yellow:hover {
    background-color: #fbbf24;
  }
</style>
