web-app/src/components/directory/DirectoryCard.vue

<script setup lang="ts">
import { type DirectoryItem } from '@/types/directory'
import {
  MapPin,
  Phone,
  ExternalLink,
  Zap,
  MessageCircle,
  Facebook,
  Instagram,
  Twitter,
  Youtube,
  UtensilsCrossed,
  Bed,
  ShoppingBag,
  Car,
  Ship,
  HelpCircle,
  Sparkles,
} from 'lucide-vue-next'
import {
  Card,
  CardContent,
  CardTitle,
  CardDescription,
} from '@/components/ui/card'

defineProps<{
  item: DirectoryItem
}>()

const categoryIcons = {
  restaurant: UtensilsCrossed,
  lodging: Bed,
  goods: ShoppingBag,
  services: Sparkles,
  taxi: Car,
  lancha: Ship,
  other: HelpCircle,
} as const

const categoryColors = {
  restaurant: 'text-orange-500',
  lodging: 'text-purple-500',
  goods: 'text-green-500',
  services: 'text-pink-500',
  taxi: 'text-yellow-500',
  lancha: 'text-blue-500',
  other: 'text-gray-500',
} as const

const socials = {
  facebook: Facebook,
  instagram: Instagram,
  twitter: Twitter,
  youtube: Youtube,
}

const socialColors = {
  facebook: 'text-blue-600 hover:text-blue-700',
  instagram: 'text-pink-600 hover:text-pink-700',
  twitter: 'text-blue-400 hover:text-blue-500',
  youtube: 'text-red-600 hover:text-red-700',
}
</script>

<template>
  <router-link :to="`/directory/${item.id}`" class="block">
    <Card class="hover:shadow-md transition-shadow relative overflow-hidden">
      <!-- Local watermark -->
      <div v-if="item.local" class="absolute right-3 bottom-2 text-2xl tracking-widest font-bold text-primary opacity-30">
        LOCAL
      </div>

      <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">
            <div class="flex items-center gap-3">
              <component 
                :is="categoryIcons[item.category]" 
                class="h-6 w-6"
                :class="categoryColors[item.category]"
                :title="item.category"
              />
              <CardTitle>{{ item.name }}</CardTitle>
            </div>
          </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 text-red-400" />
              <a v-if="item.mapsUrl" :href="item.mapsUrl" target="_blank" rel="noopener noreferrer"
                class="flex items-center gap-1 text-muted-foreground hover:text-foreground transition-colors">
                <span>{{ [item.address, item.town].filter(Boolean).join(', ') }}</span>
                <ExternalLink class="h-3 w-3 ml-1" />
              </a>
              <span v-else>{{ [item.address, item.town].filter(Boolean).join(', ') }}</span>
            </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 text-amber-500" />
              <span>{{ item.lightning }}</span>
            </div>

            <!-- Website -->
            <div v-if="item.url" class="flex items-center text-sm">
              <ExternalLink class="mr-2 h-4 w-4" />
              <a :href="item.url" target="_blank" rel="noopener noreferrer"
                class="text-muted-foreground hover:text-foreground transition-colors">
                {{ item.url.replace(/^https?:\/\//, '').split('/')[0] }}
              </a>
            </div>

            <!-- Social Media Links -->
            <div v-if="item.social" class="flex items-center gap-2 text-sm">
              <template v-for="(url, platform) in item.social" :key="platform">
                <a v-if="url" :href="url" target="_blank" rel="noopener noreferrer" :class="[
                  'transition-colors',
                  socialColors[platform as keyof typeof socialColors]
                ]" :title="platform.charAt(0).toUpperCase() + platform.slice(1)">
                  <component :is="socials[platform as keyof typeof socials]" class="h-4 w-4" />
                </a>
              </template>
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  </router-link>
</template>