import { useNotesStore } from "../../store/notesStore";
import type { NoteIndexItem } from "../../api/notesApi";
import Button from "../ui/Button";

type SyncBadgeProps = {
  note?: NoteIndexItem;
};

export default function SyncBadge({ note }: SyncBadgeProps) {
  if (!note) {
    return null;
  }

  if (note.sync.status !== "synced" && note.sync.status !== "syncing") {
    return null;
  }

  const statusLabel = note.sync.status === "synced" ? "Synced" : "Syncing";

  return (
    <div className="flex items-center gap-2 text-xs">
      <span
        className={`rounded-full px-2 py-1 ${
          note.sync.status === "synced"
            ? "bg-emerald-100 text-emerald-700"
            : note.sync.status === "syncing"
            ? "bg-amber-100 text-amber-700"
            : note.sync.status === "error"
            ? "bg-red-100 text-red-700"
            : "bg-slate-100 text-slate-600"
        }`}
      >
        {statusLabel}
      </span>
    </div>
  );
}