<script setup lang="ts">
import { useProductPrice } from '../model'
import { InputNumber } from '~/src/shared/ui'
import type { CrmVariant } from '~/src/shared/model'

const props = defineProps<{
  variants: CrmVariant[]
  productId: string
}>()

const { amount, currentUnitPrice, prevUnitPrice } = useProductPrice(props.variants, props.productId)
</script>

<template>
  <div class="bg-gray-50 rounded-2xl border border-slate-200 flex gap-5 justify-between p-5 items-center">
    <div class="flex flex-col gap-1 flex-1">
      <div class="text-2xl font-bold" :class="{ 'text-pink-800': prevUnitPrice }">
        {{ currentUnitPrice }} ₽
      </div>
      <div v-if="prevUnitPrice" class="line-through text-slate-400">
        {{ prevUnitPrice }} ₽
      </div>
    </div>
    <div class="flex-1">
      <UButton v-if="!amount" class="w-full justify-center" size="xl" @click="amount = 1">
        В корзину
      </UButton>
      <InputNumber v-else v-model="amount" />
    </div>
  </div>
</template>
