<template>
  <div class="card bg-base-100 shadow-lg">
    <div class="card-body">
      <div class="flex justify-between items-center mb-4">
        <h2 class="card-title">Pièces de la machine</h2>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <PieceItem
          v-for="piece in pieces"
          :key="piece.id"
          :piece="piece"
          :is-edit-mode="isEditMode"
          @update="$emit('update-piece', $event)"
          @edit="$emit('edit-piece', $event)"
          @custom-field-update="$emit('custom-field-update', $event)"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps<{
  pieces: any[]
  isEditMode: boolean
}>()

defineEmits<{
  'update-piece': [piece: any]
  'edit-piece': [piece: any]
  'custom-field-update': [fieldUpdate: any]
}>()
</script>
