'use client';

import { CONTACT_INFO } from '@/config/contact';
import Image from 'next/image';

const pingStyle = 'absolute inset-[6px] rounded-full animate-ping opacity-75 z-0';

export default function FloatingContactButtons() {
    return (
        <div className="fixed bottom-24 right-6 flex flex-col gap-4 z-50">
            <div className="relative w-12 h-12 flex-shrink-0 self-end">
                <a
                    href={`https://zalo.me/${CONTACT_INFO.phone.raw}`}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="rounded-full w-full h-full flex items-center justify-center bg-[#2196F3] shadow-lg"
                >
                    <Image src="/images/footer/zalo.png" alt="Zalo" width={36} height={36} />
                </a>
            </div>

            <div className="flex items-center gap-2 self-end">
                <a
                    href={CONTACT_INFO.phone.href}
                    className="bg-[#dd3333] text-white font-semibold px-3 py-2 rounded-full shadow-md hover:bg-red-600 transition-all"
                >
                    {CONTACT_INFO.phone.display}
                </a>
                <div className="relative w-12 h-12 flex-shrink-0">
                    <a
                        href={CONTACT_INFO.phone.href}
                        className="rounded-full w-full h-full flex items-center justify-center bg-green-500 shadow-lg"
                    >
                        <Image src="/images/footer/whatsapp.png" alt="WhatsApp" width={42} height={42} />
                    </a>
                </div>
            </div>
        </div>
    );
}
