import { Button } from "~/components/ui/button";

export function SettingsSaveBar({
  hasUnsavedChanges,
  isSubmitting,
  onReset,
}: {
  hasUnsavedChanges: boolean;
  isSubmitting: boolean;
  onReset: () => void;
}) {
  return (
    <div className="space-y-3">
      {hasUnsavedChanges && (
        <p className="mb-3 text-sm font-medium text-amber-700 dark:text-amber-300">
          You have unsaved settings changes.
        </p>
      )}
      <div className="flex flex-col gap-2 sm:flex-row">
        {hasUnsavedChanges && (
          <Button type="button" variant="outline" className="h-12 sm:w-48" onClick={onReset}>
            Reset Changes
          </Button>
        )}
        <Button type="submit" className="h-12 flex-1" disabled={isSubmitting}>
          {isSubmitting ? "Saving..." : "Save Settings"}
        </Button>
      </div>
    </div>
  );
}