<template>
    <div  class="ose-mini-card"
         :style="`width: 100%; min-height: 1em; background-color: ${minicard_bg};
         color: ${minicard_word_color}; text-align: ${minicard_word_align};
          cursor: pointer; padding: 5px 0px; font-weight: bold; font-size: 14px; opacity:${minicard_transparency}`">
      <div  class="ose-mini-card-text-container"> {{ minicard_word }}</div>
      <article   :class="['count-down-timer']" :hidden="timer?false:true" style="">
        <div  class="ose-time_container"
             style="text-align: center; background-color: transparent; padding-top: 3px; padding-bottom: 3px;
              display: flex; justify-content: center; align-items: center; font-weight: bold; font-size: 14px;">
          <section  class="ose-t_description" :style="`margin-right: 0.3em; color:${minicard_timer_start_word_color};`"> {{minicard_timer_start_word}}
          </section>
          <section  class="ose-t_days"
                   style="text-align: center; min-width: 24px; color: rgb(255, 255, 255);">00
          </section>
          <section  class="ose-t_days_unit" style="color: rgb(255, 255, 255);"> 日</section>
          <section  class="ose-t_hours"
                   style="text-align: center; width: 24px; color: rgb(255, 255, 255);">00
          </section>
          <section  class="ose-t_hours_unit" style="margin-right: 0.3em; color: rgb(255, 255, 255);"> 小時
          </section>
          <section  class="ose-t_minutes"
                   style="text-align: center; width: 23px; color: rgb(255, 255, 255);">00
          </section>
          <section  class="ose-t_minutes_unit" style="margin-right: 0.3em; color: rgb(255, 255, 255);">
            分
          </section>
          <section  class="ose-t_seconds"
                   style="text-align: center; width: 24px; color: rgb(255, 255, 255);">00
          </section>
          <section  class="ose-t_seconds_unit" style="color: rgb(255, 255, 255);"> 秒</section>
          <section  class="ose-t_description_end" :style="`margin-left: 0.3em; color: ${minicard_timer_end_word_color};`"> {{minicard_timer_end_word}}
          </section>
        </div>
      </article>
    </div>
</template>

<script setup>
  const props = defineProps([
    'minicard_word_color','minicard_bg','minicard_word_align','minicard_word','minicard_transparency',
      'minicard_timer_start_word','minicard_timer_start_word_color','minicard_timer_end_word','minicard_timer_end_word_color','timer'
  ])
</script>

<style scoped>

</style>