<script setup>
import { ref } from 'vue'

const props = defineProps({
  dateinputid: String,
  dateinputlabel: String,
  initdate: String,
  isHorizontal: Boolean,
})
defineEmits(['onDateChange'])

const today = new Date().toISOString().slice(0, 10)
</script>

<template>
  <label class="datelabel" :class="props.isHorizontal ? 'pr-2' : 'pb-1'" :for="props.dateinputid">
    {{ $t(props.dateinputlabel) }}
  </label>
  <input
    class="datepicker has-background-dark has-text-light"
    :id="props.dateinputid"
    type="date"
    @change="(e) => $emit('onDateChange', e.target.value)"
    :value="props.initdate"
    :max="today"
  />
</template>

<style scoped>
.datelabel {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 26px;
  border: none;
}

.datepicker {
  font-size: 26px;
  border-radius: 5px;
}

@media (max-width: 1024px) {
  .datelabel {
    font-size: 18px;
  }
  .datepicker {
    font-size: 18px;
  }
}
</style>
