<template>
  <div class="bg-card rounded-lg border shadow-sm hover:shadow-md transition-shadow">
    <div class="p-6">
      <div class="flex items-start justify-between mb-4">
        <div class="flex-1">
          <h3 class="text-lg font-semibold text-foreground">{{ stall.name }}</h3>
          <p class="text-sm text-muted-foreground mt-1">
            {{ stall.config?.description || 'No description' }}
          </p>
        </div>
        <Badge variant="secondary">{{ stall.currency }}</Badge>
      </div>
      
      <div class="space-y-3">
        <!-- Store Metrics -->
        <div class="flex items-center justify-between text-sm">
          <span class="text-muted-foreground">Products</span>
          <span class="font-medium">-</span>
        </div>
        <div class="flex items-center justify-between text-sm">
          <span class="text-muted-foreground">Shipping Zones</span>
          <span class="font-medium">{{ stall.shipping_zones?.length || 0 }}</span>
        </div>
        
        <!-- Action Buttons -->
        <div class="flex gap-2 pt-3">
          <Button 
            @click="$emit('manage', stall.id)" 
            variant="default" 
            size="sm"
            class="flex-1"
          >
            <Settings class="w-4 h-4 mr-1" />
            Manage
          </Button>
          <Button 
            @click="$emit('view-products', stall.id)" 
            variant="outline" 
            size="sm"
            class="flex-1"
          >
            <Package class="w-4 h-4 mr-1" />
            Products
          </Button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Settings, Package } from 'lucide-vue-next'
import type { Stall } from '../services/nostrmarketAPI'

// Props
interface Props {
  stall: Stall
}

defineProps<Props>()

// Emits
defineEmits<{
  manage: [stallId: string]
  'view-products': [stallId: string]
}>()
</script>