"use client"

import { Card } from "@/components/ui/card"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"

interface Message {
  id: string
  senderId: string
  receiverId: string
  content: string
  timestamp: Date
  type: "text" | "image" | "file" | "audio"
  status: "sent" | "delivered" | "read"
}

interface MessageBubbleProps {
  message: Message
  isCurrentUser: boolean
  senderName?: string
  senderAvatar?: string
  showAvatar?: boolean
}

export function MessageBubble({
  message,
  isCurrentUser,
  senderName,
  senderAvatar,
  showAvatar = false,
}: MessageBubbleProps) {
  const formatTime = (date: Date) => {
    return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })
  }

  return (
    <div className={`flex ${isCurrentUser ? "justify-end" : "justify-start"} items-end space-x-2`}>
      {!isCurrentUser && showAvatar && (
        <Avatar className="h-6 w-6">
          <AvatarImage src={senderAvatar || "/placeholder.svg"} alt={senderName} />
          <AvatarFallback className="text-xs">{senderName?.[0] || "U"}</AvatarFallback>
        </Avatar>
      )}

      <div className={`max-w-[70%] ${isCurrentUser ? "order-2" : "order-1"}`}>
        {!isCurrentUser && senderName && <p className="text-xs text-muted-foreground mb-1 px-1">{senderName}</p>}

        <Card className={`p-3 ${isCurrentUser ? "bg-primary text-primary-foreground ml-auto" : "bg-muted"}`}>
          {message.type === "text" && <p className="text-sm whitespace-pre-wrap">{message.content}</p>}
          {message.type === "image" && (
            <div className="space-y-2">
              <img
                src={message.content || "/placeholder.svg"}
                alt="Shared image"
                className="rounded-md max-w-full h-auto"
              />
            </div>
          )}
          {message.type === "file" && (
            <div className="flex items-center space-x-2">
              <div className="p-2 bg-background/20 rounded">
                <svg className="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
                  <path
                    fillRule="evenodd"
                    d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z"
                    clipRule="evenodd"
                  />
                </svg>
              </div>
              <div className="flex-1 min-w-0">
                <p className="text-sm font-medium truncate">{message.content}</p>
                <p className="text-xs opacity-70">Document</p>
              </div>
            </div>
          )}
        </Card>

        <div className={`flex items-center mt-1 space-x-1 ${isCurrentUser ? "justify-end" : "justify-start"}`}>
          <span className="text-xs text-muted-foreground">{formatTime(message.timestamp)}</span>
          {isCurrentUser && (
            <div className="flex items-center">
              {message.status === "sent" && <div className="h-2 w-2 bg-muted-foreground rounded-full" />}
              {message.status === "delivered" && (
                <div className="flex space-x-0.5">
                  <div className="h-2 w-2 bg-muted-foreground rounded-full" />
                  <div className="h-2 w-2 bg-muted-foreground rounded-full" />
                </div>
              )}
              {message.status === "read" && (
                <div className="flex space-x-0.5">
                  <div className="h-2 w-2 bg-primary rounded-full" />
                  <div className="h-2 w-2 bg-primary rounded-full" />
                </div>
              )}
            </div>
          )}
        </div>
      </div>

      {isCurrentUser && showAvatar && (
        <Avatar className="h-6 w-6">
          <AvatarImage src="/placeholder.svg" alt="You" />
          <AvatarFallback className="text-xs">You</AvatarFallback>
        </Avatar>
      )}
    </div>
  )
}