import React from 'react';
import { mdiWhatsapp } from '@mdi/js';
import BaseIcon from '../BaseIcon';

const WhatsAppButton = () => {
  return (
    <a
      href="https://wa.me/905000000000"
      target="_blank"
      rel="noreferrer"
      className="fixed bottom-8 right-8 z-[100] p-5 bg-[#25D366] text-white rounded-[1.5rem] shadow-[0_20px_40px_-15px_rgba(37,211,102,0.4)] hover:bg-[#128C7E] transition-all hover:scale-110 active:scale-90 group border-4 border-white active:translate-y-2"
    >
      <div className="absolute inset-0 bg-[#25D366] rounded-full animate-ping opacity-30 -z-10 group-hover:scale-150 transition-transform duration-1000"></div>
      <BaseIcon path={mdiWhatsapp} size={32} />
      
      {/* Tooltip */}
      <span className="absolute right-full mr-6 top-1/2 -translate-y-1/2 px-5 py-3 bg-white text-gray-950 rounded-2xl font-black text-xs uppercase tracking-widest shadow-2xl opacity-0 group-hover:opacity-100 translate-x-4 group-hover:translate-x-0 transition-all pointer-events-none whitespace-nowrap border border-gray-100 ring-4 ring-black/5">
        WhatsApp Destek Hattı
        <div className="absolute top-1/2 -translate-y-1/2 left-full w-2 h-2 bg-white rotate-45 -ml-1 border-r border-t border-gray-100"></div>
      </span>
    </a>
  );
};

export default WhatsAppButton;