import { ReactNode } from "react";

interface StickyActionBarProps {
  children: ReactNode;
  pendingSync?: boolean;
}

export function StickyActionBar({ children, pendingSync = false }: StickyActionBarProps) {
  return (
    <div
      className="fixed left-0 right-0 z-20 px-4 py-3 border-t"
      style={{
        bottom: "60px", // sits above the mobile tab bar
        backgroundColor: "var(--color-bg)",
        borderColor: "var(--color-surface-3)",
        boxShadow: "0 -4px 12px rgba(0,0,0,0.04)",
      }}
    >
      {pendingSync && (
        <div className="text-label font-semibold mb-2 flex items-center gap-2" style={{ color: "var(--color-text-muted)" }}>
          <span className="inline-block w-3 h-3 rounded-full animate-pulse" style={{ backgroundColor: "var(--color-warning)" }} />
          Pending sync
        </div>
      )}
      {children}
    </div>
  );
}

export default StickyActionBar;
