<template>
  <v-snackbar v-model="showModel" :color="color" :timeout="timeout">
    <span class="body-3">{{ message }}</span>
    <template #actions>
      <v-btn variant="text" size="small" @click="showModel = false">
        {{ closeText }}
      </v-btn>
    </template>
  </v-snackbar>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true
  },
  message: {
    type: String,
    default: ''
  },
  color: {
    type: String,
    default: 'success'
  },
  timeout: {
    type: Number,
    default: 3000
  },
  closeText: {
    type: String,
    default: 'Tutup'
  }
});

const emit = defineEmits(['update:modelValue']);

const showModel = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
});
</script>

<style scoped lang="scss">
$font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

.body-3 {
  font-size: 14px;
  line-height: 20px;
  font-family: $font-family-base;
}
</style>