"use client";

import React from "react";
import { MessageCircle } from "lucide-react";

export const WhatsAppButton: React.FC = () => {
  return (
    <a
      href="https://wa.me/27712345678?text=Hi%20Diverse%20Stationery,%20I%20have%20an%20inquiry%20about%20stationery%20products"
      target="_blank"
      rel="noopener noreferrer"
      className="hidden lg:flex fixed bottom-6 right-6 z-40 bg-emerald-500 hover:bg-emerald-600 text-white p-3.5 rounded-full shadow-2xl items-center gap-2 transition-all transform hover:scale-105 group border-2 border-white"
      title="Chat with Diverse Stationery on WhatsApp"
    >
      <MessageCircle className="w-6 h-6 fill-white text-emerald-500" />
      <span className="font-extrabold text-xs tracking-wide max-w-0 overflow-hidden group-hover:max-w-xs transition-all duration-300 whitespace-nowrap">
        WhatsApp Chat
      </span>
    </a>
  );
};