"use client"

import { Phone, Video, MapPin, MessageCircle } from "lucide-react"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"

interface User {
  id: string
  firstName: string
  lastName: string
  email: string
  avatar?: string
  isOnline: boolean
  lastSeen: Date
  location: {
    lat: number
    lng: number
    city: string
    distance: number
  }
  bio: string
}

interface UserCardProps {
  user: User
  showLocation?: boolean
  onMessage?: (userId: string) => void
  onCall?: (userId: string) => void
  onVideoCall?: (userId: string) => void
}

export function UserCard({ user, showLocation = false, onMessage, onCall, onVideoCall }: UserCardProps) {
  const formatLastSeen = (date: Date) => {
    const now = new Date()
    const diff = now.getTime() - date.getTime()
    const minutes = Math.floor(diff / (1000 * 60))
    const hours = Math.floor(diff / (1000 * 60 * 60))

    if (minutes < 1) return "Just now"
    if (minutes < 60) return `${minutes}m ago`
    if (hours < 24) return `${hours}h ago`
    return date.toLocaleDateString()
  }

  return (
    <Card className="hover:bg-accent/50 transition-colors">
      <CardContent className="p-4">
        <div className="flex items-center space-x-3">
          <div className="relative">
            <Avatar className="h-12 w-12">
              <AvatarImage src={user.avatar || "/placeholder.svg"} alt={`${user.firstName} ${user.lastName}`} />
              <AvatarFallback>
                {user.firstName[0]}
                {user.lastName[0]}
              </AvatarFallback>
            </Avatar>
            {user.isOnline && (
              <div className="absolute -bottom-1 -right-1 h-4 w-4 bg-green-500 border-2 border-background rounded-full" />
            )}
          </div>

          <div className="flex-1 min-w-0">
            <div className="flex items-center justify-between">
              <h3 className="font-semibold truncate">
                {user.firstName} {user.lastName}
              </h3>
              <div className="flex items-center space-x-1">
                {showLocation && (
                  <Badge variant="secondary" className="text-xs">
                    <MapPin className="h-3 w-3 mr-1" />
                    {user.location.distance}km
                  </Badge>
                )}
              </div>
            </div>
            <p className="text-sm text-muted-foreground truncate">{user.bio}</p>
            <div className="flex items-center justify-between mt-2">
              <span className="text-xs text-muted-foreground">
                {user.isOnline ? "Online" : formatLastSeen(user.lastSeen)}
              </span>
              <div className="flex items-center space-x-1">
                <Button variant="ghost" size="sm" onClick={() => onMessage?.(user.id)}>
                  <MessageCircle className="h-4 w-4" />
                </Button>
                <Button variant="ghost" size="sm" onClick={() => onCall?.(user.id)}>
                  <Phone className="h-4 w-4" />
                </Button>
                <Button variant="ghost" size="sm" onClick={() => onVideoCall?.(user.id)}>
                  <Video className="h-4 w-4" />
                </Button>
              </div>
            </div>
            {showLocation && <span className="text-xs text-muted-foreground">{user.location.city}</span>}
          </div>
        </div>
      </CardContent>
    </Card>
  )
}