import { useContent, getSettings } from '../lib/api'
import { WhatsApp } from './icons'

export default function WhatsAppFloat() {
  const settings = useContent(getSettings)
  const href = settings?.social.whatsapp ?? 'https://wa.me/12687858166'
  return (
    <a
      href={href}
      target="_blank"
      rel="noreferrer"
      aria-label="Chat on WhatsApp"
      className="fixed right-6 bottom-6 z-[60] grid h-14 w-14 animate-[floaty_5s_ease-in-out_infinite] place-items-center rounded-full bg-[#25d366] text-white shadow-[0_14px_30px_-8px_rgb(37_211_102/0.6)] transition-transform hover:scale-110"
    >
      <WhatsApp width={28} height={28} />
      <style>{`@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}`}</style>
    </a>
  )
}
