"use client";

import { AnimatePresence, m } from "motion/react";
import { useState } from "react";
import { ChatCircle, PaperPlaneTilt } from "@phosphor-icons/react";

const spring = { type: "spring" as const, stiffness: 500, damping: 32, mass: 0.8 };

export default function MorphingButton() {
  const [expanded, setExpanded] = useState(false);

  return (
    <div className="full center">
      <m.button
        layoutId="morph-btn"
        onClick={() => setExpanded((v) => !v)}
        className="relative flex cursor-pointer items-center justify-center overflow-hidden rounded-full bg-foreground text-background shadow-lg shadow-black/20"
        style={{ borderRadius: 999 }}
        transition={spring}
        whileTap={{ scale: 0.96 }}
      >
        <AnimatePresence mode="wait" initial={false}>
          {expanded ? (
            <m.div
              key="chat"
              initial={{ opacity: 0, filter: "blur(4px)" }}
              animate={{ opacity: 1, filter: "blur(0px)" }}
              exit={{ opacity: 0, filter: "blur(4px)" }}
              transition={{ duration: 0.15 }}
              className="flex items-center gap-2 px-5 py-3"
            >
              <input
                type="text"
                placeholder="Type a message..."
                aria-label="Type a message"
                className="w-44 bg-transparent text-sm outline-none placeholder:text-background/40"
                onClick={(e) => e.stopPropagation()}
                onKeyDown={(e) => e.key === "Enter" && setExpanded(false)}
              />
              <m.button
                onClick={(e) => {
                  e.stopPropagation();
                  setExpanded(false);
                }}
                whileHover={{ scale: 1.1 }}
                whileTap={{ scale: 0.9 }}
                className="flex size-8 cursor-pointer items-center justify-center rounded-full bg-background/15 transition-colors hover:bg-background/25"
              >
                <PaperPlaneTilt weight="fill" className="size-3.5" />
              </m.button>
            </m.div>
          ) : (
            <m.div
              key="icon"
              initial={{ opacity: 0, scale: 0.5 }}
              animate={{ opacity: 1, scale: 1 }}
              exit={{ opacity: 0, scale: 0.5 }}
              transition={{ duration: 0.15 }}
              className="flex items-center gap-2 px-5 py-3"
            >
              <ChatCircle weight="fill" className="size-4" />
              <span className="text-sm font-medium">Chat</span>
            </m.div>
          )}
        </AnimatePresence>
      </m.button>
    </div>
  );
}
Morphing Button
