import React from 'react';
import { motion } from 'framer-motion';
import { AcademicCapIcon } from '@heroicons/react/24/solid';

const TypingIndicator = ({ darkMode }) => {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: -20 }}
      className="flex gap-4 mb-6"
    >
      <div className={`flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center ${
        darkMode ? 'bg-primary-600' : 'bg-primary-500'
      }`}>
        <AcademicCapIcon className="w-5 h-5 text-white" />
      </div>

      <div className={`rounded-2xl px-4 py-3 ${
        darkMode
          ? 'bg-gray-800 border border-gray-700'
          : 'bg-white border border-gray-200 shadow-sm'
      }`}>
        <div className="typing-indicator">
          <div className={`dot ${darkMode ? 'text-gray-400' : 'text-gray-500'}`}></div>
          <div className={`dot ${darkMode ? 'text-gray-400' : 'text-gray-500'}`}></div>
          <div className={`dot ${darkMode ? 'text-gray-400' : 'text-gray-500'}`}></div>
        </div>
      </div>
    </motion.div>
  );
};

export default TypingIndicator;