import { motion } from "framer-motion";
import { MessageCircle } from "lucide-react";

type ChatButtonProps = {
  open: boolean;
  onToggle: () => void;
};

export default function ChatButton({ open, onToggle }: ChatButtonProps) {
  return (
    <div className="fixed bottom-4 right-4 z-[60] flex flex-col items-end gap-2 sm:bottom-6 sm:right-6">
      <motion.div
        initial={{ opacity: 0, y: 10 }}
        animate={{ opacity: 1, y: 0 }}
        className="hidden rounded-full bg-white/10 px-3 py-1 text-xs text-slate-100 shadow-lg backdrop-blur sm:block"
      >
        Need help?
      </motion.div>
      <motion.button
        whileHover={{ scale: 1.05 }}
        whileTap={{ scale: 0.96 }}
        onClick={onToggle}
        className="relative flex h-12 w-12 items-center justify-center rounded-full bg-gradient-to-br from-sky-500 to-cyan-400 text-white shadow-xl sm:h-14 sm:w-14"
        aria-label={open ? "Close chat" : "Open chat"}
      >
        <motion.span
          className="absolute inset-0 rounded-full bg-sky-400/40"
          animate={{ scale: [1, 1.4, 1], opacity: [0.6, 0, 0.6] }}
          transition={{ duration: 2.2, repeat: Infinity, ease: "easeInOut" }}
        />
        <MessageCircle className="relative z-10 h-5 w-5 sm:h-6 sm:w-6" />
      </motion.button>
    </div>
  );
}
