<template>
  <aside class="selection-sidebar">
    <div class="info">
      <div>Cells selected: <strong>{{ cellCount }}</strong></div>
      <div>Price / cell: <strong>{{ pricePerCell }}</strong></div>
      <div>Total: <strong>{{ total }}</strong></div>
    </div>
    <button class="btn" @click="$emit('open-upload')">Weiter</button>
  </aside>
</template>

<script setup lang="ts">
import { computed } from 'vue';

const props = defineProps({
  cellCount: { type: Number, default: 0 },
  pricePerCell: { type: Number, default: 0 },
});

const total = computed(() => props.cellCount * props.pricePerCell);
</script>

<style scoped>
.selection-sidebar {
  width: 300px;
  padding: 1rem;
  border-left: 1px solid rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.btn {
  background: #2563eb;
  color: white;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 6px;
}
</style>
