src/components/logo/Logo.tsx

// src/components/logo/Logo.tsx

import React from 'react';
import cn from "classnames";
import { humanAiIcon } from '../icons';
import './Logo.scss'; // <-- فایل استایل جدید را ایمپورت کنید

type LogoProps = {
  isMini: boolean;
  isAi: boolean;
  isActive: boolean;
  speakingVolume?: number; // ولوم صدای AI برای انیمیشن موج
  isUserSpeaking?: boolean; // برای فعال کردن انیمیشن صحبت کاربر
}

export default function Logo({isAi, isActive, isMini, speakingVolume = 0, isUserSpeaking = false}: LogoProps) {

  if (!isActive) return null;

  // محاسبه مقیاس موج بر اساس حجم صدای AI
  // ضریب 1.5 برای محسوس‌تر شدن انیمیشن است
  const aiVoiceScale = 1 + (speakingVolume * 1.5);

  return (
    <div className={cn("w-fit flex items-center justify-center")}>
      {/* loads colors for tailwind */}
      <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 موج اصلی انیمیشن صحبت کردن AI است */}
            <div
              className={cn(
                "absolute rounded-full opacity-50",
                "ai-speaking-ripple", // کلاس برای کنترل انیمیشن
                isAi ? "bg-green-200 dark:bg-green-700" : "bg-blue-200 dark:bg-blue-700",
                isMini ? "inset-[10px]" : "inset-[40px]",
              )}
              // متغیر CSS را برای کنترل مقیاس موج تنظیم می‌کنیم
              style={{ '--ai-voice-scale': aiVoiceScale } as React.CSSProperties}
            />
            
            {/* دایره‌های ثابت پس‌زمینه */}
            <div
              className={cn(
                "absolute inset-0 rounded-full opacity-50",
                isAi ? "bg-green-200 dark:bg-green-700" : "bg-blue-200 dark:bg-blue-700",
              )}
            />
            <div
              className={cn(
                "absolute rounded-full opacity-50",
                isAi ? "bg-green-300 dark:bg-green-600" : "bg-blue-300 dark:bg-blue-600",
                isMini ? "inset-[5px]" : "inset-[20px]",
              )}
            />
            <div
              className={cn(
                "absolute rounded-full opacity-50",
                isAi ? "bg-green-400 dark:bg-green-500" : "bg-blue-400 dark:bg-blue-500",
                isMini ? "inset-[12px]" : "inset-[50px]",
              )}
            />

            {/* آیکون اصلی */}
            <div className={cn(
                "z-10 absolute flex items-center justify-center text-white",
                "inset-0"
                )}>
              {humanAiIcon({ 
                size: isMini ? 24 : 45,
                // اگر کاربر در حال صحبت است، کلاس مربوطه را اضافه کن
                className: cn({ 'user-speaking': isUserSpeaking })
              })}
            </div>
          </>
      </div>
    </div>
  );
}