"use client";

import { motion } from "framer-motion";

interface TypingIndicatorProps {
  userName?: string;
}

/** Instagram-style typing indicator */
export default function TypingIndicator({ userName }: TypingIndicatorProps) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 8 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: 4 }}
      className="flex items-end gap-2 px-2 py-1"
    >
      <div className="ig-dm-in flex items-center gap-2 rounded-2xl px-4 py-2.5">
        <div className="flex items-center gap-1">
          <span className="typing-dot h-1.5 w-1.5 rounded-full bg-neutral-400 dark:bg-neutral-500" />
          <span className="typing-dot h-1.5 w-1.5 rounded-full bg-neutral-400 dark:bg-neutral-500" />
          <span className="typing-dot h-1.5 w-1.5 rounded-full bg-neutral-400 dark:bg-neutral-500" />
        </div>
        {userName && (
          <span className="text-[10px] text-neutral-500">{userName} در حال نوشتن…</span>
        )}
      </div>
    </motion.div>
  );
}
