Fluid Composer

import ComposeBox from "@/components/ui/fluid-composer";
import {motion} from "framer-motion"

// --- Animation Variants ---
// Stagger allows children to animate one after another automatically
const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.15, // Delay between each item
      delayChildren: 0.1,
    },
  },
};

// Spring physics for a "bouncy" but controlled feel
const itemVariants = {
  hidden: { opacity: 0, y: 20, scale: 0.95 },
  visible: {
    opacity: 1,
    y: 0,
    scale: 1,
    transition: {
      type: "spring",
      stiffness: 260,
      damping: 20,
    },
  },
};

export default function Page() {
  return (
    <main className="relative min-h-screen w-full overflow-hidden bg-[#F2F2F7] text-black selection:bg-blue-500/30 dark:bg-black dark:text-white">
      {/* --- Main Content --- */}
      <motion.div
        variants={containerVariants}
        initial="hidden"
        animate="visible"
        className="relative z-10 mx-auto flex max-w-2xl flex-col items-center gap-8 px-4 pt-20"
      >
        {/* Header */}
        <motion.div variants={itemVariants} className="text-center">
          <h1 className="text-3xl font-bold tracking-tight text-black dark:text-white sm:text-4xl">
            Compose
          </h1>
          <p className="mt-2 text-gray-500 dark:text-gray-400">
            Share your thoughts with the world.
          </p>
        </motion.div>

        {/* Component */}
        <motion.div variants={itemVariants} className="w-full">
          <ComposeBox userAvatar="https://image2url.com/r2/bucket2/images/1767854776194-5cced82a-f066-45bb-9db2-f64643746a58.png" />
        </motion.div>

        {/* Timeline */}
        <motion.div
          variants={itemVariants}
          className="w-full space-y-4 opacity-50 grayscale transition-all duration-500 hover:opacity-100 hover:grayscale-0"
        >
          <div className="flex items-center gap-4 py-4">
            <div className="h-[1px] flex-1 bg-gradient-to-r from-transparent via-gray-300 to-transparent dark:via-gray-700" />
            <span className="text-xs font-medium uppercase tracking-widest text-gray-400">
              Timeline
            </span>
            <div className="h-[1px] flex-1 bg-gradient-to-r from-transparent via-gray-300 to-transparent dark:via-gray-700" />
          </div>

          {/* Skeleton Posts */}
          {[1, 2].map((i) => (
            <motion.div
              key={i}
              whileHover={{ scale: 1.01 }}
              className="rounded-[24px] border border-gray-200 bg-white/40 p-6 backdrop-blur-sm dark:border-white/5 dark:bg-white/5"
            >
              <div className="flex gap-4">
                <div className="h-11 w-11 rounded-full bg-gray-200 dark:bg-white/10" />
                <div className="flex-1 space-y-2">
                  <div className="h-4 w-1/4 rounded bg-gray-200 dark:bg-white/10" />
                  <div className="h-4 w-3/4 rounded bg-gray-200 dark:bg-white/10" />
                  <div className="h-4 w-1/2 rounded bg-gray-200 dark:bg-white/10" />
                </div>
              </div>
            </motion.div>
          ))}
        </motion.div>
      </motion.div>
    </main>
  );
}