<template>
  <div>
    <button @click="makeQueue">Make a queue</button>
  </div>
</template>

<script>
import { scheduleAllOrders } from './scheduleCalculator.js';

export default {
  name: 'MakequeueBtn',
  methods: {
    makeQueue() {
      const queueItems = scheduleAllOrders();
      this.$emit('updateQueue', queueItems);
    }
  }
}
</script>

<style scoped>
button {
  /* พื้นหลังสีน้ำเงิน */
  background-color: #2196f3;
  /* สีตัวอักษรเป็นสีขาว */
  color: #fff;
  /* ไม่มีขอบ */
  border: none;
  /* มุมโค้ง */
  border-radius: 8px;
  /* ขนาดตัวอักษรใหญ่ขึ้น */
  font-size: 18px;
  font-weight: bold;
  /* ปรับขนาดปุ่มให้กว้างขึ้น */
  width: 200px;
  height: 60px;
  /* กึ่งกลางตัวอักษร */
  display: flex;
  align-items: center;
  justify-content: center;
  /* เปลี่ยนเคอร์เซอร์เป็นแบบคลิกได้ */
  cursor: pointer;
  transition: background-color 0.2s ease;
}

/* เมื่อเอาเมาส์ไปชี้ */
button:hover {
  background-color: #1976d2;
}
</style>