"use client";

import { Monitor } from "lucide-react";
import AgentePanel from "@/components/agente/AgentePanel";

export default function AgentePage() {
  return (
    <>
      {/* Mobile: no disponible */}
      <div className="md:hidden grid place-items-center rounded-xl border border-dashed border-line bg-surface px-4 py-12 text-center">
        <div>
          <Monitor className="mx-auto mb-2 h-8 w-8 text-faint opacity-50" />
          <p className="text-sm text-faint">Richard funciona solo en la versión de escritorio. Abrilo desde la compu.</p>
        </div>
      </div>

      {/* Desktop: el mismo panel que el botón flotante "Asistente de IA" */}
      <div className="hidden md:block">
        <div className="mx-auto h-[calc(100dvh-7rem)] max-w-3xl overflow-hidden rounded-2xl border border-line bg-surface">
          <AgentePanel />
        </div>
      </div>
    </>
  );
}