import { Link } from "react-router-dom";
import { FlaskConical, ArrowRight } from "lucide-react";

/**
 * LabButton — Botão que aparece na Home do SteelXR.
 *
 * ⚠️ Importante: este componente vive em /lab/.
 * Se a pasta /lab/ for deletada, o botão some.
 * (E o import em Index.tsx vira linha morta que Vite descarta via tree-shaking.)
 */
const LabButton = () => {
  return (
    <Link
      to="/lab"
      className="mt-4 block rounded-lg border border-amber-500/30 bg-amber-500/5 px-4 py-3 transition-all duration-200 hover:border-amber-400/60 hover:bg-amber-500/10"
    >
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-3">
          <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-amber-500/15 text-amber-300">
            <FlaskConical className="h-5 w-5" />
          </div>
          <div className="text-left">
            <div className="flex items-center gap-2">
              <span className="text-sm font-semibold text-amber-100">
                Laboratório de Cubos
              </span>
              <span className="rounded-full border border-amber-500/40 px-1.5 py-0.5 font-mono text-[10px] uppercase tracking-wider text-amber-300/80">
                alpha
              </span>
            </div>
            <p className="text-xs text-amber-200/60">
              Sandbox experimental — Meta Quest 3 joystick + alinhamento 3D
            </p>
          </div>
        </div>
        <ArrowRight className="h-4 w-4 text-amber-400/60" />
      </div>
    </Link>
  );
};

export default LabButton;
