<template>
  <PixelCard class="action-menu">
    <h3 class="panel-title">Actions</h3>
    <div class="action-grid">
      <PixelButton 
        size="small"
        variant="success"
        @click="$emit('feed')"
        :disabled="!canFeed"
      >
        🍖 Feed
      </PixelButton>
      
      <PixelButton 
        size="small"
        variant="primary"
        @click="$emit('play')"
        :disabled="!canPlay"
      >
        🎮 Play
      </PixelButton>
      
      <PixelButton 
        size="small"
        variant="warning"
        @click="$emit('clean')"
        :disabled="!canClean"
      >
        🧹 Clean
      </PixelButton>
      
      <PixelButton 
        size="small"
        variant="success"
        @click="$emit('heal')"
        :disabled="!canHeal"
      >
        💊 Heal
      </PixelButton>
      
      <PixelButton 
        size="small"
        variant="primary"
        @click="$emit('sleep')"
        :disabled="!canSleep"
      >
        {{ isSleeping ? '⏰ Wake' : '💤 Sleep' }}
      </PixelButton>
      
      <PixelButton 
        size="small"
        variant="warning"
        @click="$emit('shop')"
      >
        💰 Shop
      </PixelButton>
    </div>
  </PixelCard>
</template>

<script setup>
import PixelCard from './PixelCard.vue'
import PixelButton from './PixelButton.vue'

const props = defineProps({
  canFeed: {
    type: Boolean,
    default: true
  },
  canPlay: {
    type: Boolean,
    default: true
  },
  canClean: {
    type: Boolean,
    default: true
  },
  canHeal: {
    type: Boolean,
    default: true
  },
  canSleep: {
    type: Boolean,
    default: true
  },
  isSleeping: {
    type: Boolean,
    default: false
  }
})

defineEmits(['feed', 'play', 'clean', 'heal', 'sleep', 'shop'])
</script>

<style scoped>
.action-menu {
  width: 100%;
}

.panel-title {
  font-size: 14px;
  margin-bottom: 16px;
  text-align: center;
  text-transform: uppercase;
  padding-bottom: 8px;
  border-bottom: 2px solid #000;
}

.action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}
</style>
