<template>
  <div class="rounded-lg bg-[#f5f5f5] px-3">
    <div class="flex justify-between items-center py-3 border-b border-[#ddd]">
      <span class="text-[15px] text-[#333]">{{ t("common.summary.price") }}</span>
      <span class="text-[14px] text-[#333]">¥{{ referencePrice }}</span>
    </div>
    <div class="flex justify-between items-center py-3">
      <span class="text-[15px] text-[#333]">{{ t("common.summary.discount") }}</span>
      <span class="text-[14px] text-[#ff5722]">-¥{{ discount }}</span>
    </div>
  </div>
</template>

<script setup>
import { useI18n } from "vue-i18n";

const { t } = useI18n();

defineProps({
  referencePrice: {
    type: Number,
    default: 0,
  },
  discount: {
    type: Number,
    default: 0,
  },
});
</script>
