"use client";

import Link from 'next/link';
import { useLanguage } from '@/contexts/LanguageContext';
import { useState, useEffect } from 'react';

export default function WhatsAppButton() {
  const { t } = useLanguage();
  const [whatsappLink, setWhatsappLink] = useState('https://wa.me/5535988229445');

  useEffect(() => {
    // Busca o número do WhatsApp do CMS
    fetch('/api/contact-info')
      .then(res => res.json())
      .then(data => {
        if (data.whatsappLink) {
          setWhatsappLink(data.whatsappLink);
        }
      })
      .catch(console.error);
  }, []);

  return (
    <Link
      href={whatsappLink}
      target="_blank"
      rel="noopener noreferrer"
      className="fixed bottom-6 right-6 z-40 flex flex-row-reverse items-center justify-center bg-[#25D366] text-white w-14 h-14 rounded-full shadow-lg hover:bg-[#20bd5a] transition-all hover:scale-110 group animate-in slide-in-from-bottom-4 duration-700 delay-1000 hover:w-auto hover:px-6"
      aria-label={t('whatsapp.label')}
    >
      <i className="ri-whatsapp-line text-3xl leading-none"></i>
      <span className="font-bold max-w-0 overflow-hidden group-hover:max-w-xs group-hover:mr-3 transition-all duration-500 whitespace-nowrap">
        {t('whatsapp.label')}
      </span>
    </Link>
  );
}