"use client";
import { useState } from "react";
import { type Lang } from "@/lib/config";
import AgentCards from "./AgentCards";
import AgentChatDemo from "./AgentChatDemo";

interface AIAgentsInteractiveProps {
  lang: Lang;
}

export default function AIAgentsInteractive({
  lang,
}: AIAgentsInteractiveProps) {
  const [activeAgent, setActiveAgent] = useState(0);

  return (
    <div className="grid lg:grid-cols-2 gap-12 items-start">
      {/* Left: Agent Cards */}
      <AgentCards
        lang={lang}
        activeAgent={activeAgent}
        setActiveAgent={setActiveAgent}
      />

      {/* Right: Interactive Demo */}
      <AgentChatDemo lang={lang} activeAgent={activeAgent} />
    </div>
  );
}