import { Button } from "@/components/ui/button";
import { useSaveBar } from "@/hooks/useSettings";
import { cn } from "@/lib/utils";
import { __ } from "@wordpress/i18n";

/**
 * Save status, Discard and Save changes, in the page header.
 */
const SaveBar = () => {
  const { dirty, saving, save, discard } = useSaveBar();

  return (
    <div className="ino:flex ino:items-center ino:gap-3">
      <span
        aria-live="polite"
        className={cn(
          "ino:flex ino:items-center ino:gap-1.5 ino:text-sm",
          dirty ? "ino:text-amber-700" : "ino:text-emerald-700",
        )}
      >
        <span
          aria-hidden="true"
          className={cn(
            "ino:size-2 ino:rounded-full",
            dirty ? "ino:bg-amber-600" : "ino:bg-emerald-700",
          )}
        />
        {dirty
          ? __("Unsaved changes", "product-comparison-for-woocommerce")
          : __("All changes saved", "product-comparison-for-woocommerce")}
      </span>
      {dirty && (
        <Button variant="outline" onClick={discard} disabled={saving}>
          {__("Discard", "product-comparison-for-woocommerce")}
        </Button>
      )}
      <Button onClick={save} disabled={!dirty || saving}>
        {saving
          ? __("Saving…", "product-comparison-for-woocommerce")
          : __("Save changes", "product-comparison-for-woocommerce")}
      </Button>
    </div>
  );
};

export default SaveBar;