import { Icon } from "@iconify/react";
import { Button } from "@mui/material";
import { useAyudaIaStore } from "./ayudaIaStore";

/**
 * Acceso a NovaIA en celular: arriba a la derecha, en la franja de 48px que el
 * Layout ya reserva para el botón de menú, así no tapa contenido. En tablet y
 * escritorio el acceso es el ítem del menú lateral.
 */
export default function AyudaIaBotonMovil() {
  const abrir = useAyudaIaStore((s) => s.abrir);
  return (
    <Button
      onClick={abrir}
      aria-label="Abrir NovaIA"
      title="NovaIA — preguntale cómo hacer algo en el sistema"
      size="small"
      startIcon={<Icon icon="mdi:auto-awesome" width={16} />}
      sx={{
        position: "fixed",
        top: 8,
        right: 12,
        zIndex: 101,
        height: 34,
        px: 1.5,
        borderRadius: 17,
        textTransform: "none",
        fontWeight: 600,
        fontSize: "0.8rem",
        color: "#fff",
        background: "linear-gradient(135deg, #1e3a5f 0%, #2563eb 50%, #0ea5e9 100%)",
        "&:hover": { background: "linear-gradient(135deg, #1e3a5f 0%, #2563eb 50%, #0ea5e9 100%)", opacity: 0.9 },
      }}
    >
      Preguntale a NovaIA
    </Button>
  );
}