import { useUIStore } from "../../store/ui";

export function Toast() {
  const toast = useUIStore((s) => s.toast);
  if (!toast) return null;

  const isError = toast.startsWith("❌");

  return (
    <div className={`fixed bottom-10 left-1/2 -translate-x-1/2 z-50 text-sm px-4 py-2 rounded-lg shadow-lg animate-fade-in flex items-center gap-2 max-w-[80vw] ${
      isError ? "bg-red-900 text-white pointer-events-auto" : "bg-gray-900 text-white pointer-events-none"
    }`}>
      <span className="break-all">{toast}</span>
      {isError && (
        <button
          onClick={() => navigator.clipboard.writeText(toast).catch(() => {})}
          className="shrink-0 text-xs px-2 py-0.5 rounded border border-red-400 text-red-200 hover:bg-red-700 transition-colors"
        >
          复制
        </button>
      )}
    </div>
  );
}
