<script setup lang="ts">
import { type DirectoryItem } from '@/types/directory'
import { MapPin, Phone, ExternalLink, Zap, MessageCircle } from 'lucide-vue-next'
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  CardDescription,
} from '@/components/ui/card'

defineProps<{
  item: DirectoryItem
}>()

const categoryColors = {
  restaurant: 'bg-orange-100 text-orange-800',
  taxi: 'bg-yellow-100 text-yellow-800',
  lancha: 'bg-blue-100 text-blue-800',
  retail: 'bg-green-100 text-green-800',
  other: 'bg-gray-100 text-gray-800'
}
</script>

<template>
  <Card class="hover:shadow-md transition-shadow">
    <CardContent class="p-6 space-y-4">
      <!-- Image -->
      <div v-if="item.imageUrl" class="aspect-video w-full overflow-hidden rounded-md">
        <img :src="item.imageUrl" :alt="item.name" class="h-full w-full object-cover" />
      </div>

      <!-- Content -->
      <div class="space-y-3">
        <div class="flex items-start justify-between">
          <CardTitle>{{ item.name }}</CardTitle>
          <span class="rounded-full px-2.5 py-0.5 text-xs font-semibold" :class="categoryColors[item.category]">
            {{ item.category }}
          </span>
        </div>

        <CardDescription>
          {{ item.description }}
        </CardDescription>

        <!-- Contact Info -->
        <div class="space-y-2">
          <div v-if="item.town || item.address" class="flex items-center text-sm group">
            <MapPin class="mr-2 h-4 w-4" />
            <div class="flex items-center gap-1">
              <span>{{ [item.address, item.town].filter(Boolean).join(', ') }}</span>
              <a v-if="item.mapsUrl" :href="item.mapsUrl" target="_blank" rel="noopener noreferrer"
                class="text-muted-foreground hover:text-foreground ml-1 opacity-0 group-hover:opacity-100 transition-opacity">
                <ExternalLink class="h-3 w-3" />
              </a>
            </div>
          </div>

          <div v-if="item.contact" class="flex items-center text-sm gap-2">
            <Phone class="h-4 w-4" />
            <span>{{ item.contact }}</span>
            <div v-if="item.contactType" class="flex gap-1">
              <a v-if="item.contactType.includes('whatsapp')"
                :href="`https://wa.me/${item.contact.replace(/\D/g, '')}`"
                target="_blank"
                rel="noopener noreferrer"
                class="bg-green-100 text-green-800 px-2 py-0.5 rounded-full text-xs font-medium flex items-center gap-1 hover:bg-green-200 transition-colors">
                <MessageCircle class="h-3 w-3" />
                WhatsApp
              </a>
              <a v-if="item.contactType.includes('telegram')"
                :href="`https://t.me/${item.contact.replace(/\D/g, '')}`"
                target="_blank"
                rel="noopener noreferrer"
                class="bg-blue-100 text-blue-800 px-2 py-0.5 rounded-full text-xs font-medium flex items-center gap-1 hover:bg-blue-200 transition-colors">
                <MessageCircle class="h-3 w-3" />
                Telegram
              </a>
            </div>
          </div>

          <div v-if="item.lightning" class="flex items-center text-sm">
            <Zap class="mr-2 h-4 w-4" />
            <span>{{ item.lightning }}</span>
          </div>
        </div>
      </div>
    </CardContent>
  </Card>
</template>
