"use client";

import React from "react";
import { motion } from "framer-motion";
import { Box, Stack } from "@mui/material";

export const TypingIndicator = () => {
  return (
    <Stack direction="row" spacing={0.5} alignItems="center" sx={{ p: 1 }}>
      {[0, 1, 2].map((i) => (
        <motion.div
          key={i}
          initial={{ y: 0 }}
          animate={{ y: [-4, 4, -4] }}
          transition={{
            duration: 0.6,
            repeat: Infinity,
            delay: i * 0.15,
            ease: "easeInOut",
          }}
        >
          <Box
            sx={{
              width: 8,
              height: 8,
              borderRadius: "50%",
              background: "linear-gradient(135deg, #FF6B6B 0%, #FF8E53 100%)",
            }}
          />
        </motion.div>
      ))}
    </Stack>
  );
};

export const Blob = ({
  color,
  size,
  top,
  left,
  delay,
}: {
  color: string;
  size: number;
  top: string;
  left: string;
  delay: number;
}) => (
  <motion.div
    initial={{ scale: 0.8, opacity: 0.3, x: 0, y: 0 }}
    animate={{
      scale: [0.8, 1.2, 0.8],
      opacity: [0.3, 0.5, 0.3],
      x: [0, 30, 0],
      y: [0, -30, 0],
    }}
    transition={{
      duration: 8,
      repeat: Infinity,
      ease: "easeInOut",
      delay,
    }}
    style={{
      position: "absolute",
      top,
      left,
      width: size,
      height: size,
      borderRadius: "50%",
      background: color,
      filter: "blur(60px)",
      zIndex: 0,
      pointerEvents: "none",
    }}
  />
);