<script setup>
// 아래에서 올라오는 바텀시트(콘텐츠 높이). 선택 항목(계좌·분류 등)에 사용.
defineProps({
  modelValue: { type: Boolean, required: true },
  title: { type: String, default: '' },
})
defineEmits(['update:modelValue'])
</script>

<template>
  <Teleport to="body">
    <Transition name="bs">
      <div v-if="modelValue" class="bs-wrap" @click.self="$emit('update:modelValue', false)">
        <div class="bs-panel" role="dialog" aria-modal="true">
          <div class="bs-grip" @click="$emit('update:modelValue', false)"></div>
          <div class="bs-head">
            <span class="bs-title">{{ title }}</span>
            <button type="button" class="bs-close" aria-label="닫기" @click="$emit('update:modelValue', false)">×</button>
          </div>
          <div class="bs-body"><slot /></div>
        </div>
      </div>
    </Transition>
  </Teleport>
</template>

<style scoped>
.bs-wrap {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: flex-end;
}
.bs-panel {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  background: var(--color-background);
  border-radius: 16px 16px 0 0;
  max-height: 85vh;
  overflow-y: auto;
  padding: 0.4rem 1.1rem calc(1rem + env(safe-area-inset-bottom, 0));
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.25);
}
.bs-grip {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: var(--color-border);
  margin: 0.4rem auto 0.2rem;
  cursor: pointer;
}
.bs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.3rem 0 0.6rem;
}
.bs-title {
  font-weight: 700;
  font-size: 1rem;
}
.bs-close {
  border: 0;
  background: transparent;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--color-text);
  cursor: pointer;
}
.bs-enter-active {
  transition: background 0.2s ease;
}
.bs-leave-active {
  transition: background 0.18s ease;
}
.bs-enter-from,
.bs-leave-to {
  background: rgba(0, 0, 0, 0);
}
.bs-enter-active .bs-panel {
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}
.bs-leave-active .bs-panel {
  transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1);
}
.bs-enter-from .bs-panel,
.bs-leave-to .bs-panel {
  transform: translateY(100%);
}
</style>
