import { Box } from "@chakra-ui/react";
import { keyframes } from "@emotion/react";

const pulse = keyframes`
  0% {
    transform: scale(0.7);
    opacity: 0.4;
    box-shadow: 0 0 0 0 rgba(147, 51, 234, 0.4);
  }
  50% {
    transform: scale(1);
    opacity: 1;
    box-shadow: 0 0 0 8px rgba(147, 51, 234, 0);
  }
  100% {
    transform: scale(0.7);
    opacity: 0.4;
    box-shadow: 0 0 0 0 rgba(147, 51, 234, 0);
  }
`;

const ChatTypingLoader = ({ size = "10px", color = "purple.400" }) => {
  return (
    <Box
      w={size}
      h={size}
      borderRadius="full"
      bg={color}
      animation={`${pulse} 1.1s ease-in-out infinite`}
    />
  );
};

export default ChatTypingLoader;