<template>
    <button :id="this.id" class="text-button" :style="this.style">
        {{text}}
    </button>
</template>

<style>
.text-button{
  border: none;
  margin-bottom: 36px;
  font-family: Shojumaru;
  font-style: normal;
  font-weight: normal;
  font-size: 48px;
  line-height: 64px;
  text-align: center;

  color: #000000;
  background: rgba(196, 196, 196, 0.6);

  padding: 20px;
}
</style>

<script>
export default {
  props: {
    text: { type: String, default: ''},
    width: { type: [String], default: "750px" },
    height: { type: [String], default: "130px" },
    click: {type: String, default: ''},
    id: {type: String, default: ''},
    
  },
  computed: {
    style() {
      const style = {
        height: this.height,
        maxWidth: this.width
      }
      return style;
    }
  }
}
</script>