import { motion } from "motion/react";
import { Plus } from "lucide-react";

interface FeedFloatingButtonProps {
  onClick: () => void;
}

export function FeedFloatingButton({ onClick }: FeedFloatingButtonProps) {
  return (
    <div
      className="feed-floating-cta fixed left-0 right-0 z-40 px-4 max-w-md mx-auto pointer-events-none transition-opacity duration-200"
      style={{
        bottom: "calc(env(safe-area-inset-bottom, 0px) + 112px)",
      }}
    >
      <motion.button
        onClick={onClick}
        whileHover={{ scale: 1.02, y: -2 }}
        whileTap={{ scale: 0.98 }}
        animate={{ y: [0, -4, 0] }}
        transition={{
          y: { duration: 2.5, repeat: Infinity, ease: "easeInOut" },
        }}
        className="pointer-events-auto ml-auto flex items-center gap-2"
        style={{
          filter: "drop-shadow(0 8px 18px rgba(12, 5, 24, 0.45))",
        }}
      >
        <span
          className="rounded-full px-3 py-1.5 text-[11px] font-semibold text-white"
          style={{
            background: "linear-gradient(180deg, rgba(88, 52, 126, 0.92) 0%, rgba(48, 31, 85, 0.9) 100%)",
            border: "1px solid rgba(255, 170, 224, 0.46)",
            backdropFilter: "blur(12px)",
            WebkitBackdropFilter: "blur(12px)",
          }}
        >
          چالش خودت رو شروع کن
        </span>
        <span
          className="h-12 w-12 rounded-full flex items-center justify-center"
          style={{
            background: "linear-gradient(180deg, #ff79cf 0%, #a855f7 100%)",
            boxShadow: "inset 0 1px 0 rgba(255,255,255,0.35), 0 10px 20px rgba(31, 9, 51, 0.45)",
          }}
          aria-hidden
        >
          <Plus size={26} color="#fff5fb" strokeWidth={2.5} />
        </span>
      </motion.button>
    </div>
  );
}
