<template>
  <view class="footer-button-bar" :style="elderVarStyle">
    <view class="footer-button" :class="{ 'footer-button--brown': theme === 'brown' }" @click="onClick"> {{ text }}</view>
  </view>
</template>
<script setup>
import useDebounce from '@/hooks/useDebounce';
import useElder from '@/hooks/useElder';

const emits = defineEmits(['onClick'])
const props = defineProps({
  text: { type: String, default: '确定' },
  theme: { type: String, default: 'blue' } // 'blue' 或 'brown'
})
const { elderVarStyle } = useElder();
const onClick = useDebounce(() => {
  emits('onClick')
})

</script>
<style lang="scss" scoped>
.footer-button-bar {
  padding: 24rpx 30rpx;
  background: #fff;
}

.footer-button {
  height: 44px;
  line-height: 43px;
  font-size: var(--text-lg);
  background: $theme-brown-primary;
  color: #fff;
  border-radius: 16rpx;
  text-align: center;
}

.footer-button--brown {
  background: $theme-brown-primary;
  box-shadow: 0 4rpx 12rpx rgba(139, 101, 56, 0.3);
}
</style>
