"use client";

import { MessageCircle, Sparkles, Wand2 } from "lucide-react";
import { useBackendHealth } from "@/hooks/use-backend-health";
import { cn } from "@/lib/utils";

export function BottomToolbar() {
  const status = useBackendHealth();
  const indicatorColor =
    status === "ok" ? "bg-green-500" : status === "error" ? "bg-red-500" : "bg-gray-300";

  return (
    <footer className="flex h-12 items-center justify-between border-t border-[#eeeeee] px-6 text-sm">
      <div className="flex items-center gap-2 text-xs text-gray-500">
        <span className={cn("h-2 w-2 rounded-full", indicatorColor)} />
        后端连接：{status === "ok" ? "正常" : status === "error" ? "异常" : "检测中"}
      </div>
      <div className="flex items-center gap-3 text-gray-600">
        <button type="button" className="wolai-hover rounded-full px-3 py-1">
          <MessageCircle className="mr-1 inline h-4 w-4" />
          发送
        </button>
        <button type="button" className="wolai-hover rounded-full px-3 py-1">
          <Wand2 className="mr-1 inline h-4 w-4" />
          魔力
        </button>
        <button
          type="button"
          className="flex h-8 w-8 items-center justify-center rounded-full bg-[#2563eb] text-white shadow-sm"
        >
          <Sparkles className="h-4 w-4" />
        </button>
      </div>
    </footer>
  );
}