src/components/logo/Logo.tsx

// src/components/logo/Logo.tsx

import React from 'react';
import cn from "classnames";
import { humanAiIcon } from '../icons';

type LogoProps = {
  isMini: boolean;
  isAi: boolean;
  isActive: boolean;
  speakingVolume?: number;
  isUserSpeaking?: boolean;
}

export default function Logo({ isAi, isActive, isMini, speakingVolume = 0, isUserSpeaking = false }: LogoProps) {
  if (!isActive) return null;

  // --- منطق انیمیشن صدای ربات ---
  const aiVoiceScale = 1 + (speakingVolume * 1.5);
  const isAiSpeaking = speakingVolume > 0.02; // یک آستانه برای جلوگیری از لرزش‌های جزئی
  const animatedCircleStyle: React.CSSProperties = {
    transition: 'transform 0.15s ease-out',
    transform: `scale(${aiVoiceScale})`
  };

  return (
    <div className={cn("w-fit flex items-center justify-center")}>
      <div className={"hidden bg-green-200 bg-green-300 bg-green-400 bg-blue-200 bg-blue-300 bg-blue-400 dark:bg-green-700 dark:bg-green-600 dark:bg-green-500 dark:bg-blue-700 dark:bg-blue-600 dark:bg-blue-500"}>
        color pre-loader
      </div>
      
      <div className={cn("relative", isMini ? "w-[80px] h-[80px]" : "w-[200px] h-[200px]")}>
        {/* انیمیشن پینگ اصلی که همیشه فعال است */}
        <div className={cn(
            "absolute rounded-full opacity-50 animate-ping",
            isAi ? "bg-green-200" : "bg-blue-200", // حذف dark mode برای سادگی
            isMini ? "inset-[10px]" : "inset-[40px]"
        )} />
        
        {/* این دایره با صدای ربات بزرگ و کوچک می‌شود */}
        <div 
            className={cn(
                "absolute rounded-full opacity-50",
                isAi ? "bg-green-200" : "bg-blue-200",
                isMini ? "inset-[10px]" : "inset-[40px]"
            )} 
            style={animatedCircleStyle} 
        />
        
        {/* بقیه دایره‌های ثابت پس‌زمینه */}
        <div className={cn("absolute inset-0 rounded-full opacity-50", isAi ? "bg-green-200" : "bg-blue-200")} />
        <div className={cn("absolute rounded-full opacity-50", isAi ? "bg-green-300" : "bg-blue-300", isMini ? "inset-[5px]" : "inset-[20px]")} />
        <div className={cn("absolute rounded-full opacity-50", isAi ? "bg-green-400" : "bg-blue-400", isMini ? "inset-[12px]" : "inset-[50px]")} />
        
        <div className={cn("z-10 absolute flex items-center justify-center inset-0")}>
          {humanAiIcon({ 
            size: isMini ? 24 : 45,
            isUserSpeaking: isUserSpeaking, // <-- این برای آدمک است
            isAiSpeaking: isAiSpeaking,     // <-- این برای ربات است
          })}
        </div>
      </div>
    </div>
  );
}