"use client";
import { type Lang } from "@/lib/config";
import { agents } from "./AgentData";

interface AgentCardsProps {
  lang: Lang;
  activeAgent: number;
  setActiveAgent: (index: number) => void;
}

export default function AgentCards({
  lang,
  activeAgent,
  setActiveAgent,
}: AgentCardsProps) {
  const isAr = lang === "ar";

  return (
    <div className="space-y-4">
      {agents.map((agent, index) => (
        <div
          key={index}
          className={`relative p-6 rounded-xl cursor-pointer transition-all duration-500 ${
            activeAgent === index
              ? "bg-white dark:bg-slate-800 shadow-2xl scale-105 border-2 border-purple-500"
              : "bg-white/50 dark:bg-slate-800/50 hover:shadow-lg"
          }`}
          onClick={() => setActiveAgent(index)}
        >
          <div className="flex items-start gap-4">
            <div
              className={`w-14 h-14 rounded-xl bg-gradient-to-br ${agent.colorFrom} ${agent.colorTo} flex items-center justify-center text-2xl text-white shadow-lg ${
                activeAgent === index ? "animate-pulse" : ""
              }`}
            >
              {agent.icon}
            </div>
            <div className="flex-1">
              <h3 className="text-lg font-bold text-brand-ink dark:text-white mb-1">
                {isAr ? agent.nameAr : agent.nameEn}
              </h3>
              <p className="text-sm text-slate-500 dark:text-slate-400 mb-3">
                {isAr ? agent.roleAr : agent.roleEn}
              </p>
              <div className="grid grid-cols-2 gap-2">
                {(isAr ? agent.tasksAr : agent.tasksEn).map((task, i) => (
                  <div
                    key={i}
                    className={`text-xs px-3 py-1 rounded-full transition-all duration-300 ${
                      activeAgent === index
                        ? "bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300"
                        : "bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-400"
                    }`}
                    style={{
                      animationDelay: `${i * 100}ms`,
                    }}
                  >
                    {task}
                  </div>
                ))}
              </div>
            </div>
          </div>
          {activeAgent === index && (
            <div className="absolute inset-0 bg-gradient-to-r from-purple-500/10 to-pink-500/10 rounded-xl animate-pulse" />
          )}
        </div>
      ))}
    </div>
  );
}