import React from 'react';
import { Phone, MessageCircle, Sparkles } from 'lucide-react';

interface MobileBottomBarProps {
  onBookClick: () => void;
}

export const MobileBottomBar: React.FC<MobileBottomBarProps> = ({ onBookClick }) => {
  const whatsappUrl = "https://wa.me/919939332200?text=" + encodeURIComponent("नमस्ते स्काई हेल्थ सेंटर, मुझे आपकी सेवा के बारे में जानकारी चाहिए। मैं अपनी समस्या बताकर समय बुक करना चाहता/चाहती हूं।");

  return (
    <div className="md:hidden fixed bottom-0 left-0 right-0 z-40 bg-white/95 backdrop-blur-md border-t border-slate-200 px-3 py-2.5 shadow-2xl flex items-center justify-between gap-2">
      <a
        href="tel:+919939332200"
        className="flex-1 flex flex-col items-center justify-center py-2 px-1 bg-sky-50 text-sky-700 rounded-xl border border-sky-200 text-xs font-bold"
      >
        <Phone className="w-4 h-4 mb-1" />
        <span>कॉल</span>
      </a>

      <a
        href={whatsappUrl}
        target="_blank"
        rel="noopener noreferrer"
        className="flex-1 flex flex-col items-center justify-center py-2 px-1 bg-emerald-600 text-white rounded-xl shadow-sm text-xs font-bold"
      >
        <MessageCircle className="w-4 h-4 mb-1 fill-white" />
        <span>WhatsApp</span>
      </a>

      <button
        onClick={onBookClick}
        className="flex-1 flex flex-col items-center justify-center py-2 px-1 bg-blue-700 text-white rounded-xl shadow-md text-xs font-bold"
      >
        <Sparkles className="w-4 h-4 mb-1" />
        <span>समय बुक करें</span>
      </button>
    </div>
  );
};
