<template>
  <div>
    <div class="tabs">
      <button
        v-for="(name, idx) in batchNames"
        :key="name"
        :class="{ active: idx === currentTab }"
        @click="currentTab = idx"
      >
        {{ name }}
      </button>
    </div>
    <BatchGraph :batch-index="currentTab" />
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import BatchGraph from "~/components/domain/culture-graph/BatchGraph.vue";
const batchNames = ["배치 1", "배치 2", "배치 3", "배치 4"];
const currentTab = ref(0);
</script>
<style scoped>
.tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.tabs button {
  padding: 8px 24px;
  border: none;
  background: #f5f5f5;
  color: #333;
  font-weight: 600;
  border-radius: 6px 6px 0 0;
  cursor: pointer;
  transition: background 0.2s;
}
.tabs button.active {
  background: #1976d2;
  color: #fff;
}
</style>
