"use client";

import { Conversation } from "@/types/conversations";
import { Skeleton } from "./ui/skeleton";
import { PhoneIncoming, PhoneOutgoing } from "lucide-react";


interface MessageItemCallProps {
    conversation: Conversation;
}

const MessageItemCall = ({ conversation }: MessageItemCallProps) => {
    return (
        <div className="flex flex-col gap-2">
            <div className="flex flex-row gap-2 items-center">
                <div className="bg-zinc-600/25  dark:bg-zinc-800 rounded-full p-3">
                    {
                        conversation?.direction == "inbound" ? <PhoneIncoming className="h-3 w-3"/> : <PhoneOutgoing className="h-3 w-3"/>
                    }
                </div>
                <div className="flex flex-col gap-1">
                    <p className="text-sm text-gray-800 dark:text-white ">Voice Call</p>
                    {
                        conversation.call_status == 1 && (
                            <span className="text-sm text-gray-800 dark:text-white text-xs">{conversation.duration} detik</span>
                        )
                    }
                    {   
                        conversation.call_status == 2 && (
                            <span className="text-sm text-gray-800 dark:text-white">Panggilan tidak terjawab</span>
                        )
                    }

                    {   
                        conversation.call_status == 3 && (
                            <span className="text-sm text-gray-800 dark:text-white">Panggilan Ditolak</span>
                        )
                    }
                </div>
                
            </div>
        </div>
    );
};

export default MessageItemCall;