"use client";

import { CopilotChat } from "@copilotkit/react-ui";
import { Sparkles } from "lucide-react";

const SUGGESTIONS = [
  { title: "¿Cuál es mi saldo neto hoy?", message: "¿Cuál es mi saldo neto hoy?" },
  { title: "¿Cuánto gasté en el ciclo anterior?", message: "¿Cuánto gasté en el ciclo anterior?" },
  { title: "Últimas 10 transacciones", message: "Muéstrame mis últimas 10 transacciones" },
  { title: "¿Cómo va mi pensión?", message: "¿Cómo va mi pensión?" },
];

export default function AgentHomeClient() {
  return (
    <div className="flex flex-col h-[calc(100vh-105px)]">
      <div className="mb-4">
        <h1 className="text-2xl font-bold tracking-tight font-heading flex items-center gap-2">
          <Sparkles className="w-5 h-5 text-primary" />
          Asistente
        </h1>
        <p className="text-sm text-muted-foreground">
          Pregúntale a WealthySmart sobre tus finanzas.
        </p>
      </div>

      <div className="flex-1 min-h-0 rounded-xl border border-border overflow-hidden bg-card">
        <CopilotChat
          className="h-full"
          labels={{
            title: "WealthySmart",
            initial: "¿Qué quieres saber sobre tus finanzas?",
            placeholder: "Escribe tu pregunta…",
          }}
          suggestions={SUGGESTIONS}
        />
      </div>
    </div>
  );
}